Mercado

Stack

The frontend and backend is built with the Next.js framework. Next.js API Routes allows us to extend a Next.js frontend app by adding a backend to it. We can use Next.js API Routes to create API endpoints as a Node.js serverless function. The GraphQL server is built on an endpoint using Apollo Server, and application data is managed in the frontend with Apollo Client. The project was written entirely in TypeScript, which combined with GraphQL offers a high level of code introspection and type safety.

I decided to use a noSQL database, MongoDB, for its flexible document schemas to store the data for the application. The data is stored in a MongoDB Atlas cloud database, whilst the site is hosted on Vercel.

Design & Accessibility

My main focus on this project was the functionality of the front and backend, and so I used Chakra UI to build out the frontend much more quickly. It is a great tool, providing accessible and customisable React components, which made the UI much more user friendly.

Authentication

Instead of using a ready-made authentication system, such as NextAuth.js, I built a custom one using Http-only cookies, bcryptjs and JWT access and refresh tokens.

After a user signs up or logs in, the server sends an access token and a refresh token in a cookie to the user's browser. The tokens store just the user id and user role only, all other sensitive data is stored in the database. The cookies are sent with each HTTP request and checked for validation before any query or mutation is undertaken. The access token has a short lifespan and can be renewed with a valid refresh token. Once the refresh token expires the user must login again. As most sensitive data is fetched server-side, via getServerSideProps, authentication checks are made during this request. If the user is unauthenticated, they are redirected before they can access the page and see unauthenticated content.

File upload

Users are able to upload photos when they create a product. To upload a photo is fairly straightforward with a REST API, and a bit more challenging with GraphQL. The graphql-upload library allowed me to create a custom middleware for the Apollo server to handle multipart requests, i.e. uploading photos in the frontend using apollo-upload-client.

Payments

I chose the popular payments provider Stripe to take online payments for the site. If using the Next.js framework, Stripe suggests using their prebuilt checkout page, which is what I opted for, alternatively, a custom one can be built using the Stripe Elements API.

A Next.js API endpoint, /api/checkout-sessions, is added that will create a Checkout Session when the user decides to purchase a product and clicks the 'Proceed To Checkout' button. This is a Stripe API call that will create a session for the user to pay. Once the session is created, with the product and user details included, the user is redirected to the Stripe checkout page. Once the user has paid, the session is closed and the payment is processed.

After successful payment, the user is redirected back to the site and shown a success message. A webhook listens for successful completion of the payment and updates the database with the order details.