Xef Finances Demo Frontend

Development

The project is built with vite, a build tool that aims to provide a faster and leaner development experience for modern web projects.

One of vite goals is to let the developer focus on the development and features instead of spending time in setting the dev environment. Should you need it, vite is fully documented and offers a rich and detailed guide to solve any doubt in their site.

Environment

You need to have Node.js versions 14.18+ or 16+. But the current LTS is Node.js 18, so it is recommended to go with that one.

Install

As other general JS and Node.js based projects, dependencies are managed through npm, so the first thing needed to be done to run the project is to install its dependencies with:

npm install

Commands

Through vite, you can currently run the following commands in the project:

• Start a dev server to work on the project:

  npm run dev

• Build the project for production:

  npm run build

• Locally preview a production build:

  npm run preview

You have different options for these commands in the vite web CLI section.

Features

The vite build process supports:

• TypeScript
• JSX
• Hot module replacement
• Different styling solutions.
• Static assets management.
• WASM
• Web workers

UI library

The project relies on React and MUI to build the features and all its visual components.

Specifically, the project uses the MUI Core - Material UI components. They are ready-to-use foundational React components and are detailed and extensively documented in the MUI site.

Routing

Client side routing is managed through React Router To add new routes or modify the current ones, follow the settings in the src/main.tsx file.

State management

There is no specific state management library in the app.

Follow React recommendations to use state hooks when you are gonna set some kind of state for a single (or app branch) component, and contexts to share state between different sections in the page.

These two approaches can be found in the sidebar (local state), and in the use of a loading state (context).

Styling

Beyond the MUI inner styling engine, the project uses CSS modules to style the components. You can find a .module.css file along the tsx one.

Code linting

Thorugh ESLint and Prettier, you are gonna find different rules already configured and being in use in the project. Unless you want to modify any of them, you shouldn't need to set up anything as you probably already use a modern IDE/code editor like VS Code.

Code organization

• Most of the configuration and option files are placed at the project root.
• Static assets can be found in the public directory.
• Source code for the app is under src.
• With this in mind, other assets that would be processed through vite are stored in the src/assets.
• Then you can also find components. Each component includes a TypeScript file, a styling one, and an index, for a cleaner exporting/importing.
• Code concerning state and other contexts related functions are in state.
• The MUI theme definition and configuration is set in the styles folder. You might not need to touch any of these settings.
• Other utility and helper functions should be placed under src/utils.