Project: Expenses management
About the project
This project is built while learning about Remix, a full-stack framework extended from React.
A brief description of Remix, Remix is developed by the React Router team, which fully support Sever Side Rendering (SSR) and is a formidable competitor with Next.js.
The main purpose of this website is for expenses management, testing performance of Remix, handling form action with server actions, Hydrate data using server loader function, API Route, etc.
A brief description of Remix, Remix is developed by the React Router team, which fully support Sever Side Rendering (SSR) and is a formidable competitor with Next.js.
The main purpose of this website is for expenses management, testing performance of Remix, handling form action with server actions, Hydrate data using server loader function, API Route, etc.
Technologies
MongoDB
Remix Run
Node.jsDemo Website
Project respository
Project details
Main PageExpense listExpense charts
View image
Expenses list
Pre-render the page on the server using Remix SWR, and excecute loader function on the server side and useLoaderData to access prefetched data on the client and return a fully rendered page.
This page will display a list of expense which user which is stored in the database (MongoDB).
The big benefit of SSR is that it will greatly improve application SEO because search engine will also see the source code of the page.
This page will display a list of expense which user which is stored in the database (MongoDB).
The big benefit of SSR is that it will greatly improve application SEO because search engine will also see the source code of the page.
Submit new expense
View image
Form handling
The website using built in Form handling from Remix which is using the default form behavior to send a request to the sever. Remix embraces the default behavior which reduce the need for third parties API such as Axios, or Fetch and improving the performance of the app.
Login pageCookie header from serverStored Session CookieAdded cookie to request headers
View image
Authentication
The website leveraged Remix's session-based authentication mechanism, which involved the creation of session storage on the server.
When a user logged in, a session was generated, encapsulating relevant user information, and a session ID cookie was sent back to the client. This approach offers heightened security and improved performance compared to token-based authentication systems. The inclusion of the session ID cookie in every request simplifies the configuration of authentication options, such as protected routes and secured APIs.
When a user logged in, a session was generated, encapsulating relevant user information, and a session ID cookie was sent back to the client. This approach offers heightened security and improved performance compared to token-based authentication systems. The inclusion of the session ID cookie in every request simplifies the configuration of authentication options, such as protected routes and secured APIs.