[click image to enlarge]
This app is a mail app, where the user can login and see his emails, filter by date, see the labels usage in a nice chart, and add new labels to email.
To run the project ensure you have a working .env file then run:
npm install && npm run devthen open http://localhost:3000.
Use this endpoint to retrieve emails
forDate - set a date to get emails for a specific day, default is Today's date.
Endpoint for getting all user's labels.
Endpoint for redirecting user to the SSO login flow.
Use the endpoint to save labels on mail.
id - email id
folders - array of floder's ids to set.
Callback endpoint for the login flow to end with.
- I used Nylas as my mail integration.
- Deleting labels is not implemented yet.
- Design is minimal to allow basic functionality.
- I used Next.js for a fast MVP but the FE and BE can be separated easily.
- Basic cache was used for the labels fetching to reduce load on the api.
- This project was a nice mail app POC
- To-do: Add tests.
- Thanks for reading 😊
- After pushing Login button user is redirecting to
api/v1/login - A link for login is generated then the server is redirecting the user to Google's SSO flow, its includes a callback to
api/v1/oauth - Google redirect the user after successful login to
api/v1/oauth. - The server generates a grant id for this user and returns a cookie with the id for later use.
- The app uses the cookie to detect a logged user.
- Using
/api/v1/foldersapp is getting the labels for later use. (this data is cached on localStorage) - The app showing today's emails,
api/v1/emailsis used. - When changing the date the same api is used but with
forDateparam. - Users can choose new labels for email from the list we have on cache.
- a PUT request to
/api/v1/messages/[id]will save the new change. - User can reload the data.