About Next app router - Cryptocurrency website

Introduction

This project is not about showcasing a fancy UI, but is created with the intention of providing required Infrastructure of a modern Next.js application.

The Goal is to provide a ready-made starting point for a frontend developer to begin their work and focus mainly on creating components and not to worry about behind the scenes.

In this project we have created an express.js backend for providing some API and establishing our authentication and authorization.

Features

In a nutshell, I can list the features of the project as below:

API Mock capability: Mocking API endpoints is crucial in developing frontend applications, specially if you want to implement all the states of an API (success, loading, error). Also, API Mock capability is needed if you want to have e2e tests in your project and be independent of your API.
For that matter I created mock capability using MSW package and integrated it with Next.js. Also, we have some customization in our mocks, so that it has a cycle. meaning in each new request you can get a new response. This capability is engineered alongside with our mocks.
E2E Tests: I added the E2E testing capability utilizing PlayWright package which is a strong and complete solution for testing. Benefiting from our API Mock capability, testing features with playwright becomes a breeze.
Express.js Server: In order to be able to efficiently implement auth operations, I created an Express.js server. This server is a complete boilerplate project on its own. Because it has been developed using typescript, and it has its own database which is sqlite. When you sign up and create a new account, actually a new record is added to the database.
refresh token and access token are provided with HTTP Only cookies to replicate a better security.
Front Panel: This section of the app is intended to be behind a login page. Meaning first you need to sign up and have an account. Then from the Login from you can access the dashboard. In the code this section is separated from the website and has its own layout and works like an SPA.
Comprehensive Error Handling: Error handling, specially in a Next.js app was important for me. So I handled most probable cases of errors in a Next.js application. If you request some API endpoints more than once or click on menu items more than once you can see it in action.
Miscellaneous: There are a lot of different points and features that are implemented in the project that we suffice to just name them here:
- Development button to restart the Next.js server just by clicking on it in the UI.
- GitHub actions - to check the typescript and eslint errors in the CI.

How to run the project?

After cloning the code from THIS repository you will need to install the dependencies for both frontend and backend like this:

First install the frontend packages like:


        yarn install

then for the backend:


        cd server


        yarn install

After making sure that packages are installed go to the Next.js root and run these commands:


        yarn devServer


        yarn dev

Notes:

mock capability is enabled by default in the .env file.