My Resume
enes
Toggle to light theme
Basic Store

Basic Store

Explore Demo

Basic Store is my first public web application, it consists of a restful API developed in NestJS and a web page using NextJS as the main framework. It simulates a typical e-commerce page but with the addition of being able to bid on a product. His purpose was always to apply acquired knowledge and translate it into something material.

  • preview
  • preview
  • preview
  • preview
  • preview
  • preview
  • preview
  • preview
slider

Implemented technologies

  • NESTJSNESTJS
  • TYPESCRIPTTYPESCRIPT
  • TYPEORMTYPEORM
  • POSTGRESQLPOSTGRESQL
  • SWAGGERSWAGGER
  • NEXTJSNEXTJS
  • REACTREACT
  • JAVASCRIPTJAVASCRIPT

Process and challenges

  • Backend

    1. First of all, I had to develop the basic structure. As it was not a very complex project, it was a relatively simple task, especially considering the facilities of NestCli. Designing the database was not a great challenge, thanks to typeorm was a very intuitive and fast task compared to writing native SQL.

    2. Later I concentrated on the business logic (services), the processing and validation of information (controllers). In the process of completing this task, I was simultaneously implementing an authentication and authorization system provided by PassportJS implementing JWT tokens.

    3. Finally, I focused on the API documentation. For this I used Swagger, a tool that allowed me to document the API very easily and quickly thanks to the combination with nestjs. Also, it allowed me to generate a client test for the API which allowed me to test it faster and more efficiently.

    4. API Deployment: As I did in StopRows, my intention was to use DigitalOcean to unfold the API. However, due to some limitations and complications, I decided to use Azure again. In this case I set up a linux (RedHat) server where I installed the necessary dependencies and got the app running with PM2. Again, it took me a while due to mostly newbie mistakes. For example, the firewall didn't allow inbound ports and it took me a while to figure it out.

  • Frontend

    1. Basic nextjs structure (pages folder, eslint, next.config.js, etc). Next was the development of the main page (NavBar, Footer, product list) and particular product page using dynamic routing and using ServerSideProps.

    2. Later I set about developing custom hooks (one for authentication and one for fetching) and developing the login and profile creation components.

    3. Finally, I concentrated on polishing user interface and experience details and improving practices (not repeating logic, endpoints in the same file, etc).

    4. Vercel was used again in the deploy, extremely fast and functional.

Conclusion and next steps

There are always issues that can be improved, especially considering that it is my first 'big project'. But in particular, there were a couple of issues that remained pending: testing, web sockets to see the bids in real time, caching for both the frontend and the backend, and a better responsive design.