Phonebook Full-Stack App

Phonebook full-stack web app using NodeJS (Express) with Prisma for ORM and PostgreSQL for database (hosted on Supabase, alongside storage), and NextJS with Tailwind for the frontend.🚀

Structure

Codebase	Description
app	NextJS App
server	NodeJS (Express) API

This project is deployed on Vercel (NextJS App) and Render (NodeJS Express API). The database I'm using is PostgreSQL and is hosted on Supabase, alongside the storage.

Branches

• main -> used this branch for everything

What this project is

This project was made as a side project to showcase my current skills with this stack. It is built with the guidance of the following designed Figma pages:

1. Sign Up
2. Login
3. Home
4. Edit
5. New

So this is what I did!

Discussion

For the technical decisions I made, I used JWT Cookie authentication for simplicity, however, this would vary based on the nature of the project i.e. the scale, the use case and the architecture. Also, for fetching data from the client, login and other multiple interactions between the client and the server could be improved, but I went with the simplest solutions to keep things easy.

The project is missing so much functionality, like skeletons for loading for example. I also didn't go crazy with the design system in Tailwind config because colors were all over the place in the Figma design. I did what I could do best.

The project is also not responsive; the provided design was only for desktop, so, you get it.

Also, contacts pagination is not supported, probably after loading 10 contacts the logic will break.

Feel free to go through the README.md for each of the directories to understand how to use. Thanks and good luck!

TODO:

• Move jwt validation to the backend
• Add skeletons for loading state
• Make the design responsive
• Pagination

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Omar Adel - @omarxadel - [email protected]

Project Link: https://github.com/omarxadel/phonebook-app