Note Taking App - React

Demo link 🔥🔥

http://note_taking_app_nima.surge.sh/

File Structure 🔥🔥

The structure of the project is Feature First Design pattern. You will see that all of the files are related to the one components component and each folder has own styles. If each component needs own reducers and actions, they will have them in the root folder.

Shared folders (the features that are shared to all components) are outside of components. so, statemanagement and Utils should be on the src root.

|   |   ├── components
|   |   |   ├── CreateNote
|   |   |   |   ├── index.js
|   |   |   |   ├── styles.js
|   |   |   |   ├── Snackbar.js
|   |   |   ├── MainComponent
|   |   |   |   ├── index.js
|   |   |   |   ├── styles.js
|   |   |   ├── NoteBooks
|   |   |   |   ├── index.js
|   |   |   |   ├── styles.js
|   |   |   ├── NoteList
|   |   |   |   ├── index.js
|   |   |   |   ├── styles.js
|   |   |   |   ├── ListNotes.test.js
|   |   |   |   ├── Note.js
|   |   ├── statemanagement
|   |   |   ├── index.js
|   |   ├── Utils
|   |   |   ├── localStorage.js
|   |   |   ├── localStorage.test.js
|   |   |   ├── Modal.js
|   |   |   ├── showModal.js
|   |   |   ├── TestUtils.js

Commands

Run

The command to run CRA project on 3000 port.

npm run start

Build

The command to build project in build folder.

npm run build

Test

The command to run unit tests.

npm run test

Prettier

The command to run Prettier to make codes Pretty with nice indents.

npm run prettier

ES Lint

The command to run ESLint .

npm run lint

Husky (Git webhook) 🐶

Husky is a tool ( and also a cute Dog 🐶 ) to make webhooks on Github. I make a Webhook to run prettier and ESLint before pushing.

Architecture 🔥🔥

• Styling ✔️

There are many UI kits for styling to choose, but I recommend usingMaterial-UI because of the JSS and rendering performances in new hooks features. 😎

• Components ✔️

Components are following the First Feature structure. experimentaly, this structure helps to organizing your application and develop it with a team of React developers

• State management ✔️

The state management in this project is, Context API.

• Importing components ✔️

Main components name in their folder is index.js. so you can import it like below :

import NoteList from "../components/NoteList"

instead of

import NoteList from "../components/NoteList/NoteListComponent"

It's better to use package.json inside of all Components folder with a name tag to explain a detail for that component.

{
  "main": "NoteListComponent.js"
}

But this feature is just in CRA and for babel configs, you have to configure webpack with directory-named-webpack-plugin plugin.

Features 🔥🔥

• The user should be able to create a new note.
• The user should be able to edit and delete a note.
• The user should be able to navigate through multiple notes.
• Search function to find notes.
• Create notes in different categories.
• Create notes in different Notebooks.
• Move notes trough categories.
• Markdown editor.
• Using localStorage to store notes.

Run 🔥🔥

npm ✌️

run the command below:

• npm run build

• optional if not exists : npm i -g serve

• npm run serve build/

• open http://localhost:5000

Docker ✌️✌️

• first build the project:

docker build . -t nta-react

• now run the Docker on port 80

docker run -p 8080:80 nta-react

• open the project on localhost:8080

CI/CD

Travis CI ✌️

Configuration of Travis CI/CD is inside of .travis.yml file.

language: node_js
node_js:
  - "stable"
cache:
  directories:
    - node_modules
script:
  - npm test
  - npm run build
deploy:
  provider: surge
  skip_cleanup: true
  domain: note_taking_app_nima.surge.sh
  project: ./build/
on:
  branch: master

Script block is running the tests at first, then building the project. Deploy section is deploying the project on surge.sh domain from build folder.

CircleCI ✌️✌️

Configuration of Circle CI is inside of .circleci folder.

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:12.13.0

    working_directory: ~/repo

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run: npm install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      # run tests!
      - run: npm run test