My Resume
enes
Toggle to light theme
Stop Rows

Stop Rows

Explore Demo

I had this idea when in high school a teacher asked me to do a project and, at that time, I spent large amounts of time sitting in line at the bank. The possible solution that came to me was to make a remote queue system.

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

Implemented technologies

  • EXPRESS
  • JAVASCRIPTJAVASCRIPT
  • MONGODBMONGODB
  • MONGOOSE
  • SWAGGERSWAGGER
  • NEXTJSNEXTJS
  • REACTREACT
  • TYPESCRIPTTYPESCRIPT

Process and challenges

  • Backend

    1. Firstly a basic structure was established separating controllers, middlewares, services and routers. I decided to do it this way since scalability is not important in this case.

    2. In order to create the schemas in mongoose, I first had to establish a connection and configure Mongodb. Although it wasn't my first time using mongoose, this time I wanted to better document myself so I could get the most out of it. the tools that Mongo offers. For example, the use of indexes or geospatial attributes. I had some problems when doing queries with certain filters because as of today I don't have such a deep understanding of this library.

    3. In this step most of the business logic was developed. I had (and still have) some doubts regarding certain aspects of the architecture. To solve this problem I read a couple of books that explain how to structure a restful API (REST API Development with Node.js by Fernando Doglio and The REST API Design Handbook by George Reese).

    4. Here I focused on establishing routing as intuitive as I thought.

    5. I applied the data validation with JOI knowing that mongoose has a similar functionality. The decision had no logical basis other than that I had left pending to use this library. In addition, I structured a middleware for error handling focusing on the codes of the errors that the database returned and a 500 for the others. Thus, in this way there is no place to leak possible sensitive information.

    6. Auth with particular passport middlewares. An important functionality for this project is authentication and authorization. Authentication was resolved with passportJS, using the JWT and local libraries. Authorization, instead, was determined by a system of roles and matching the user's id with the business owner's id.

    7. Something very important that I learned developing this project is about Jest and the usefulness of testing: although it is not the first time I have run testing (at the university, I taught programming paradigms, it was a requirement to deliver practical work), it is the first time that it is very useful for me to detect certain specific errors that I would not find when interacting with Postman. In the future, I should implement the tests at an earlier stage.

    8. For last I left the documentation, it wasn't very complex but it wasn't as practical as in the previous project. I used Swagger again but in this case I had to write the specifications manually. Anyway the result was optimal .

    9. Deployment: In this case I took advantage of a voucher to use on DigitalOcean. So I decided to host my application on this PaaS. It was simple: I referenced the GitHub repository, entered the variables of environment and npm commands to build and deploy to production.

  • Frontend

    1. First I developed the skeleton of the application: a page for new users or customers and another component for owners to manage their stores.

    2. Maps api, I remember that for high school I had to use the Google Maps API but applied in html and js. Now in React I can say that it is very similar and intuitive (besides that it is well documented).

    3. I later developed a custom hook that consumes the API to do an infinite scroll using the interception observer. It was interesting and useful to learn.

    4. I made a particular page for each store. It receives the id as a parameter of the url and looks for the information from the server side (SSP).

    5. I also made a component that shows the list in 'real time' of customers in the queue. It can be recycled for the owners, where it gives the possibility of deleting users.

    6. In the authentication aspect, I already had the experience of previous projects: hosting JWTs in cookies with an expiration date, making a custom hook for login, signup and logout. The main difference is that in this project I implemented refresh tokens and had to learn how to handle them.

    7. I developed a recyclable form to be able to add and modify a store, what changes between them is the data it has from before and the fetch options.

    8. Functional improvements (delete the list, the list appears on the main screen, if the fetch failed it did not give a warning).

    9. This was my first deployment of an application made in NextJs. I had seen that in a Platzi course, they used a site called Vercel where it was very fast and intuitive (also free). I entered my credentials and the deploy was as promised.

Conclusion and next steps

I can think of several improvements that were pending: cache, web Sockets to see the rows in real time, improvements in UX/UI such as responsive design.