va3y / ng-raffle

Angular full-stack demo

NgRaffle

Live: https://ng-raffle.vercel.app/

Development server

To run the app with the dev server, Vercel CLI is needed:

npm i -g vercel
npm i

npm run vstart # runs api + frontend
npm run start # runs only frontend

Environment variables

To run the api locally the DATABASE_URL environment variable must be set. This is a secret for db connection.

Features

• Optimistic UI. The data is saved as you type
• The session id is stored in a cookie
• A simple logging service is implemented with a simple api call
• The form is created dynamically, according to the schema
• The db is hosted by Planetscale, connection in dev is done via secret env keys
• The basic backend is done by serverless functions on Vercel

Todo

• Create a form template
• Figure out the way to handle persistence. I can use a separate endpoint, or maybe just store it in a cookie
• Create basic db tables and setup connection for dev/prod environment
• Intercept requests with session id header
• Write backend api endpoints
  • Submit Form
  • Logging
  • Get a session id (?)
  • Get current form state (?)
• Integrate frontend with api
• Validation
• Show total number of application and the chance to win
• A more fancy layout
• Create form in backend by schema
• Decompose components
• Code cleanup

Nice to have-s:

• Prefetch assets
• Figure out a way to store files. Connect s3
• PWA
• Tests
• Move off the material ui
• i18n supoprt. So far, all the text content is in English string literals
• If the form grows in complexity, moving the form building to backend must be a good idea