Frontend Architecture Basic Example

This project was created to be an example of what I consider a good frontend architecture for basic projects.

Summary

• Technologies Used
• Architecture and Directories
• Local Configuration
• Testing
• Storybook Documentation
• Possible Improvements
• Authors
• License

Technologies Used

• HTML & CSS
• Javascript
• React
• Create React App
• Storybook for component documentation
• Jest for testing
• React Testing Library for testing
• NPM
• Github Actions for CI/CD

Architecture and Directories

This project uses a folder structure based on the Atomic Design, by Brad Frost. I love this philosophy and find it’s a really useful way to think about components that make up our applications.

Project
├── .github
│   ├── workflows: Github Actions workflows
│   .husky: Husky Hooks config
│   .storybook: Storybook config
├── src
│   ├── api: Project mock api
│   ├── assets: Project assets
│   ├── components
|   |   ├── atoms:  Inspired by the naming in Atomic Design, I generally call my foundational components atoms. These are things like buttons, headings, text, and things that don’t stand up so well on their own,but are necessary for the success of the other elements in our application.
|   |   ├── patterns: These components are reusable UI patterns that are composed from the atom-level components.
|   |   ├── screens: These components represent our pages or screens in an application.
│   ├── App.js: Main application component.
│   ├── index.js: EntryPoint of application.
│   ├── Routes.js: Application routes.
│   ├── setupTests.js: Tests configuration
│   ├── theme.css:
|── .eslintrc: ESLint project configuration.
|── .gitignore: Specifies files to Git ignore
|── .prettierrc: Prettier project configuration.
|── jsconfig.json: JS config configuration.
├── package.json: File that manages all the dependecies and contains script definitions.

The Atoms, Patterns and Screens naming schema is also based on the Ryan Lanciaux works.

Local Configuration

After cloning the project, enter in the project root and run the following command:

$ npm run setup

• By default the application will be started at port 3000.
• You can also see the application in production clicking here.

Testing

Use the following command to run it:

$ npm run test:coverage

• After the test finishes a folder called COVERAGE will be generated in the project root.
• Open coverage/lcov-report/index.html file to check coverage visually.
• You can also see the coverage report online clicking here.

Storybook Documentation

This project uses Storybook for component documentation, allowing you to check in details each component in the project. Run the following command to access it:

$ npm run sb:dev

• By default the storybook will be started at port 6006.
• You can also see the storybook documentation online clicking here.

Possible Improvements

A system is never perfect and there is always room for improvement. Here are some points that I would like to enhance if I had more time:

• Rewrite the project using Typescript
• Use Vite rather than CRA
• Use a form library like React Hook Form for form validation.

Authors

Phillipe Martins

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details