Yat is a complete, fully accessible, todolist application, done with React.js + Node.js (client and server folders).
- React.js.
- Typescript.
- Vite.
- Vitest.
- Cypress.
- Storybook.
- SASS.
- Redux + Redux Saga.
- ESLint.
- Mirage.js.
- JsDoc.
- Node.js.
- Typescript.
- Express.
- MongoDB.
Here you are:
- React
- Custom hook (with useSyncExternalStore)
- Hoc
- Generic component
- Context provider and use it
- useImperativeHandle: here and here
- CSS
- msw: here and here
- Zustand
- Storybook
- Axios
- Express
- Auth token
- CSRF token
- Create: here and here
- Verification
- Apply to paths
- With Axios
- Retrieve token: here and here
- Mongo DB
- Connector
- Query (CRUD)
- Encryption:
- Configuration: here and here
- Create data key
- Encrypt helper
- Encrypt data
- Testing
-
Specify your MongoDB connection in the backend (.env file).
-
Run this command:
npm run runallThis command runs frontend and backend at the same time (A frontend reload might be needed if no data is displayed).
In the client directory, you can run:
Runs the app in the development mode, using Vite.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
NOTE: it is not needed to run a service to test the application, because internally, it uses a local fake API (it is configured to run in development mode)
Launches the test runner. Uses Vitest.
Launches the test runner, displays the test coverage and generates some extra information in coverage folder.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Opens the Cypress interface. Also enables port 9222 for debugging.
Runs the Cypress E2E tests in the console mode (no visual interface).
Runs the application in debug mode and opens the Cypress interface.
Runs the application in debug mode and runs the Cypress E2E tests.
Opens Storybook page.
Lints the code, both with eslint and stylelint.
In the server directory, you can run:
To start Node.js, running (by default) in http://localhost:3001.
The frontend application uses mirage-js to work with an in-memory local fake API server (but only for test purposes, as data won't persist). This is an efficient way of working with frontend applications, being agnostic from real (testing or production) API's. So you can run the frontend application alone, setting this in .env file: VITE_APP_FAKE_API = true.
The frontend project is built based in the atomic design principles. The components are divided into different types (atoms, particles, molecules, etc). Each component is atomic, with no dependencies (except the components connected to Redux). Each component can be visualized and manually tested with Storybook.
Most of the business logic is done in Redux. Working in this way, allows to the component to be lighweight, and easier to test and to modify.
The side effects related to Redux, is in the middleware, managed by Redux Saga. That means that for example the API calls are done there.
Is Redux needed for this project? Not really ;).
=======
The frontend application uses msw to work with an in-memory local fake API server (but only for test purposes, as data won't persist). This is an efficient way of working with frontend applications, being agnostic from real (testing or production) API's. So you can run the frontend application alone, setting this in .env file: VITE_APP_FAKE_API = true.
The frontend project is built based in the atomic design principles. The components are divided into different types (atoms, particles, molecules, etc). Each component is atomic, with no dependencies (except the components connected to Zustand). Each component can be visualized and manually tested with Storybook.
Zustand is used as the store manager. Most of Yat's business logic is in Zustand (store, side effects or middleware). Working in this way, allows to the component to be lighweight, and easier to test and to modify.
- mongodb: NoSQL database.
- react.js: javascript library for building user interfaces.
- vite.
- storybook: tool for developing UI components in isolation. It is based on the atomic design principles.
- React Router: routing for React.
- typescript: typed superset of Javascript that compiles to plain Javascript.
- mirage-js: fake local API, used when debugging the application, to have a working API but agnostic from APIs.
- vitest: testing tool.
- msw: fake local API, used when debugging the application, to have a working API but agnostic from APIs.
- cypress: library for end-to-end testing.
- axios: promise based HTTP client.
- axios-retry: helper library for Axios, that intercepts failer request and retries.
- typescript: typed superset of Javascript that compiles to plain Javascript.
- vitest: testing tool.