joalbertg/react-calendar_app

Calendar App with react

Calendar App

• Bootstrap

• Font Awesome CDN

• Sweetalert 2

• React Router

• Big Calendar

• Datetime Picker

• Moment

• Redux

• React Redux

• Redux devtools

• Enzyme

• enzyme-to-json

• Custom environment variables

Backend repository

• Calendar API

Project Structure

run tree -I "node_modules|screenshots|public"

.
├── Dockerfile
├── README.md
├── docker-compose.yml
├── package.json
├── src
│   ├── CalendarApp.js
│   ├── actions
│   │   ├── auth.js
│   │   ├── events.js
│   │   ├── index.js
│   │   └── ui.js
│   ├── components
│   │   ├── auth
│   │   │   ├── LoginScreen.js
│   │   │   ├── index.js
│   │   │   └── login.css
│   │   ├── calendar
│   │   │   ├── CalendarEvent.js
│   │   │   ├── CalendarModal.js
│   │   │   ├── CalendarScreen.js
│   │   │   └── index.js
│   │   └── ui
│   │       ├── AddNewFab.js
│   │       ├── DeleteEventFab.js
│   │       ├── Navbar.js
│   │       └── index.js
│   ├── helpers
│   │   ├── calendar-messages-es.js
│   │   ├── fetch.js
│   │   └── prepare-events.js
│   ├── hooks
│   │   ├── index.js
│   │   └── useForm.js
│   ├── index.js
│   ├── reducers
│   │   ├── authReducer.js
│   │   ├── calendarReducer.js
│   │   ├── index.js
│   │   ├── rootReducers.js
│   │   └── uiReducer.js
│   ├── routers
│   │   ├── AppRouter.js
│   │   ├── PrivateRoute.js
│   │   ├── PublicRoute.js
│   │   └── index.js
│   ├── setupTests.js
│   ├── store
│   │   ├── index.js
│   │   └── store.js
│   ├── styles.css
│   ├── tests
│   │   ├── actions
│   │   │   └── auth.test.js
│   │   ├── components
│   │   │   ├── auth
│   │   │   │   ├── LoginScreen.test.js
│   │   │   │   └── __snapshots__
│   │   │   │       └── LoginScreen.test.js.snap
│   │   │   ├── calendar
│   │   │   │   ├── CalendarModal.test.js
│   │   │   │   ├── CalendarScreen.test.js
│   │   │   │   └── __snapshots__
│   │   │   │       └── CalendarScreen.test.js.snap
│   │   │   └── ui
│   │   │       ├── DeleteEventFab.test.js
│   │   │       └── __snapshots__
│   │   │           └── DeleteEventFab.test.js.snap
│   │   ├── helpers
│   │   │   └── fetch.test.js
│   │   ├── reducers
│   │   │   └── uiReducer.test.js
│   │   ├── routers
│   │   │   ├── AppRouter.test.js
│   │   │   └── __snapshots__
│   │   │       └── AppRouter.test.js.snap
│   │   └── types
│   │       └── types.test.js
│   └── types
│       ├── index.js
│       └── types.js
└── yarn.lock

26 directories, 55 files

Screenshots

Installs

With package.json and dependencies

docker-compose run app yarn

Without dependencies

docker-compose run app yarn add react-router-dom react-big-calendar moment validator
docker-compose run app yarn add react-datetime-picker react-modal sweetalert2
docker-compose run app yarn add react-datetime-picker react-redux redux redux-thunk
docker-compose run app yarn add link-module-alias --dev
docker-compose run app yarn add enzyme enzyme-adapter-react-16 enzyme-to-json redux-mock-store --dev

Start project

run docker-compose up

Tests

run docker-compose run app test --runInBand, or

run docker-compose run app 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",
  "alias:build": "yarn preinstall && yarn postinstall"
},
"_moduleAliases": {
  "~root": ".",
  "~src": "./src",
  "~actions": "./src/actions",
  "~components": "./src/components",
  "~helpers": "./src/helpers",
  "~hooks": "./src/hooks",
  "~reducers": "./src/reducers",
  "~routers": "./src/routers",
  "~store": "./src/store",
  "~types": "./src/types"
},
...

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

import App from '~src/CalendarApp';

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

Deploy to Heroku platform

run docker-compose run app yarn add serve

...
"scripts": {
  "dev": "react-scripts start",
  "start": "serve -s build",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject",
  "heroku-postbuild": "yarn build"
},
...
"engines": {
  "node": "14.0.0",
  "yarn": "^1.17.3"
}
...