I'll explain to you how was my process for building this portfolio
Design
To design this website I used Figma, first I drew my desired component in a book with a pencil, it helps me to know how many components I need and a better idea before designing with Figma. When I decided which color I wanted to use and create my color palette this was the design result.
Frontend
After I got my design, I started building it with NextJs and Chakra UI following my design and making it responsive. When I built the API services I also added the
the front end, for I used custom Hooks to handle the API request and build the components in that way I got my code clean and fast to debug. In this way, I separate my building and request login from the render login, it's like the SOLID principle where we just do one thing in a component.
Backend
For the backend, I use Express (Nodejs) and Postgresql for my database, here I build every API to control my data in the database and return a response in every request, so I build first the Login API where I hash my password and use Express sessions to secure my website and not allow other people to enter my admin section, I also use Csrf protection. To save my pictures I set up Multer middleware and sent it to Imagekit service so it creates a file for every project in that way, I have my files organized. In my, it's a many-to-many relationship so I create a table where get the project ID and Tag ID so that way I can make the relationship.
Update 2023
After one year I decided to check again all my code and found different things I wanted to improve and also finish pending things I had before (I couldn't because was busy with my job and getting my CS degree)
the things I decided to change were:
- Integrate Docker with my backend for a fast and consistent deployment to production
- Remove the UI from my custom hook and create a separate file for that component (this was to follow better the methodology of SOLID)
- Integrate Prisma in my backend to manage my database and create migrations in every change on my tables declaration so my database is more maintainable
- Finish the UI section for creating projects and be able to edit and delete them in an easy and quick way
- Use EsLint and Prettier settings for my backend and frontend to keep my code more consistent and clean
- refactor all the code to match the Eslint and Prettier Rules and also use the new absolute path from my typescript configuration
- changed my domain name so I had to change all my DNS settings for my frontend and backend
These changes made my code more clean and easy to work, you can check my GitHub to see portfolio code and understand more about this improve
My next app is almost done now just building the React Native version of my app (I already have the web app working) after that I plan to continue my app to manage the monthly money in this case I wanna use Java Spring Boot to learn this framework while I develop this app, this is the best and fun way in my case for learn something new.