joalbertg/react-journal_app

Journal App

• React Router

• Font Awesome

• Animate CSS

• Sweetalert 2

• Moment

• Cloudinary

• Link module alias

• Redux

• React Redux

• Redux devtools

Installs

With package.json and dependencies

docker-compose run app yarn

Without dependencies

docker-compose run app yarn add node-sass react-router-dom
docker-compose run app yarn add react-redux redux
docker-compose run app yarn add firebase redux-thunk
docker-compose run app yarn add validator sweetalert2 moment
docker-compose run app yarn add link-module-alias cloudinary redux-mock-store --dev

Project Structure

run tree -I "node_modules|public"

.
├── Dockerfile
├── README.md
├── docker-compose.yml
├── package.json
├── src
│   ├── JournalApp.js
│   ├── actions
│   │   ├── auth.js
│   │   ├── index.js
│   │   ├── notes.js
│   │   └── ui.js
│   ├── cloudinary
│   │   ├── cloudinary-config.js
│   │   └── index.js
│   ├── components
│   │   ├── auth
│   │   │   ├── LoginScreen.js
│   │   │   ├── RegisterScreen.js
│   │   │   └── index.js
│   │   ├── journal
│   │   │   ├── JournalEntries.js
│   │   │   ├── JournalEntry.js
│   │   │   ├── JournalScreen.js
│   │   │   ├── NothingSelected.js
│   │   │   ├── Sidebar.js
│   │   │   └── index.js
│   │   └── notes
│   │       ├── NotesAppBar.js
│   │       ├── NotesScreen.js
│   │       └── index.js
│   ├── firebase
│   │   ├── firebase-config.js
│   │   └── index.js
│   ├── helpers
│   │   ├── fileUpload.js
│   │   ├── index.js
│   │   └── loadNotes.js
│   ├── hooks
│   │   └── useForm.js
│   ├── index.js
│   ├── reducers
│   │   ├── authReducer.js
│   │   ├── index.js
│   │   ├── notesReducer.js
│   │   └── uiReducer.js
│   ├── routers
│   │   ├── AppRouter.js
│   │   ├── AuthRouter.js
│   │   ├── PrivateRoute.js
│   │   ├── PublicRoute.js
│   │   └── index.js
│   ├── setupTests.js
│   ├── store
│   │   ├── index.js
│   │   └── store.js
│   ├── styles
│   │   ├── base
│   │   │   ├── _base.scss
│   │   │   └── _settings.scss
│   │   ├── components
│   │   │   ├── _auth.scss
│   │   │   ├── _buttons.scss
│   │   │   ├── _journal.scss
│   │   │   ├── _links.scss
│   │   │   ├── _notes.scss
│   │   │   └── _nothing.scss
│   │   └── styles.scss
│   ├── tests
│   │   ├── actions
│   │   │   ├── auth.test.js
│   │   │   ├── notes.test.js
│   │   │   └── ui.test.js
│   │   ├── components
│   │   │   ├── auth
│   │   │   │   ├── LoginScreen.test.js
│   │   │   │   ├── RegisterScreen.test.js
│   │   │   │   └── __snapshots__
│   │   │   │       ├── LoginScreen.test.js.snap
│   │   │   │       └── RegisterScreen.test.js.snap
│   │   │   ├── journal
│   │   │   │   ├── JournalEntry.test.js
│   │   │   │   ├── Sidebar.test.js
│   │   │   │   └── __snapshots__
│   │   │   │       ├── JournalEntry.test.js.snap
│   │   │   │       └── Sidebar.test.js.snap
│   │   │   └── notes
│   │   │       ├── NotesScreen.test.js
│   │   │       └── __snapshots__
│   │   │           └── NotesScreen.test.js.snap
│   │   ├── fixtures
│   │   │   └── demoAuth.js
│   │   ├── helpers
│   │   │   └── fileUpload.test.js
│   │   ├── reducers
│   │   │   └── authReducer.test.js
│   │   ├── routers
│   │   │   └── AppRouter.test.js
│   │   └── types
│   │       └── types.test.js
│   └── types
│       ├── index.js
│       └── types.js
└── yarn.lock

31 directories, 72 files

Start Project

run docker-compose up

Tests

run docker-compose run app yarn test --runInBand

run docker-compose run app yarn test --maxWorkers=4

Link module alias

run docker-compose run app yarn preinstall for clean alias.

run docker-compose run app yarn postinstall for generate alias.

...
"scripts": {
  ...
  "preinstall": "command -v link-module-alias && link-module-alias clean || true",
  "postinstall": "link-module-alias"
},
"_moduleAliases": {
  "~root": ".",
  "~src" : "./src",
  "~styles": "./src/styles/styles.scss"
},
...

import React from 'react';
import ReactDOM from 'react-dom';

import App from '~src/JournalApp';

import '~styles';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);