Deus Todos

Table of Contents

1. Requirements
2. Development
3. Instructions
4. Project Structure
5. Cypress

Requirements

• node 16.13.2 or higher
• yarn 1.22.15 or higher

Instructions

To run locally use yarn dev and go to https://localhost:4000, you can create categories, create todos per category, edit todo title, delete todos per category, can save the state to localstorage, so todos are not lost, can clear state and start fresh. To visually see tests running use yarn test it will open Cypress ui so you can run test Use yarn ci simulates a ci job that builds lints, and run tests headless, next job would be release and deploy.

Development

All scripts at your disposal:

yarn <script>	Description
dev	Serves your app at localhost:4000
test	Opens cypress UI and test framework
build	Builds the application to ./dist folder
ci	Builds, lints, serves, and runs tests headless

Project Structure

.
├── dist                           # All build-related source code
├── nginx                          # nginx config for docker file
├── cypress                        # Cypress main folder and configuration files
│ └── fixtures                      # Tests mock data
│ └── integration                   # Tests spec files
│ └── plugins                       # Custom plugins for cypress
│ └── support                       # Custom commands or presets for cypress
│ └── tsconfig.json                 # Typescript sub config for cypress
│
└── src                             # Application source code
    ├── index.html                    # Main HTML page container for app
    ├── index.tsx                     # Application entry point
    │
    ├── assets                        # asset files to be required
    ├── App                           # Main App entry point
    │   ├── index.tsx                   # Folder entry point
    │   ├── App.tsx                     # This is the main component before any route
    │   ├── PrivateRoute.tsx            # Private routing component checks auth or redirects
    │   ├── routes.tsx                  # App routes config and redux middleware for redirects
    │   ├── styles.css                  # Component styling
    │   └── types.ts                    # Component types
    │
    ├── components                    # Global reusable components
    │   └── Component                   # Component folder
    │       ├── index.tsx                 # Component entry point
    │       ├── Component.tsx             # Component file
    │       ├── styles.css                # Component styling
    │       └── types.ts                  # Component types
    │
    ├── pages                         # Components with business logic
    │   └── Page                        # Component with business logic folder
    │       └── views                     # Bigger components might require to split views
    │       │    └── view_01                # View 01 folder
    │       │       ├── index.tsx             # Component entry point
    │       │       ├── Component.tsx         # Component file
    │       │       ├── styles.css            # Component styling
    │       │       └── types.ts              # Component types
    │       │  
    │       ├── index.tsx             # Component entry point
    │       ├── Component.tsx         # Component file
    │       ├── styles.css            # Component styling
    │       └── types.ts              # Component types
    │
    ├── constants                     # Global constants
    │
    ├── theme                       # Global styles and theme

Cypress

Cypress has an UI so you can run the tests simply use the script yarn test and it will open the cypress UI.

When running on the CI the tests are going to run in cli mode you can also do it by using yarn cypress run