Personal project to experiment with multiple technologies and test setup, configuration and security. This project has two parts: a public side where users provide content and an admin dashboard where authenticated users manage user provided content.
- Node 12
- Docker 19
The client side uses React as the view layer and Mobx to manage state. Code that retrieves and transforms data is written in TypeScript. Sass is used for styling and Webpack for bundling. API responses are mocked on the client-side using Mirage JS (see mocks
directory.) To get started:
$ cd src/client
$ npm install
$ npm run dev
- Browse to http://localhost:3000/admin/login
The server side runs on Express, all data is stored in MongoDB. To get started on the server side:
$ cd src/server
$ npm install
$ node server/server.js
- Browse to http://localhost:8000/api
The application is bundled using Docker and it can be brought up along its supporting services (Nginx and MongoDB) to simulate a production environment. To run the dockerized application:
- Create an
.env
file by copying.env.sample
, modify its contents to match your preferences - Run the project from within
docker
container$ docker-compose up
- Browse to http://localhost:8080/admin/login
.
├── README.md
├── client
│ ├── dist
│ ├── mocks
│ │ └── server.js
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── admin.html
│ │ └── guests.html
│ ├── src
│ │ ├── components
│ │ │ ├── Button
│ │ │ │ ├── Button.scss
│ │ │ │ └── index.jsx
│ │ │ └── Icon
│ │ │ ├── Button.scss
│ │ │ └── index.jsx
│ │ ├── containers
│ │ │ ├── Admin
│ │ │ │ ├── App.js
│ │ │ │ ├── Login
│ │ │ │ │ └── index.jsx
│ │ │ │ ├── Uploads
│ │ │ │ │ └── index.jsx
│ │ │ │ └── index.jsx
│ │ │ └── Guests
│ │ │ ├── App.js
│ │ │ └── index.jsx
│ │ ├── services
│ │ │ └── Uploads.ts
│ │ └── stores
│ │ └── UploadStore.ts
│ ├── tsconfig.json
│ └── webpack
│ ├── webpack.config.dev.js
│ └── webpack.config.prod.js
├── docker
│ ├── Dockerfile
│ ├── docker-compose.dev.yml
│ ├── docker-compose.yml
│ ├── mongo
│ │ └── mongo.conf
│ └── nginx
│ └── default.conf
└── server
├── db
│ ├── index.js
│ └── models
│ └── upload.js
├── package-lock.json
├── package.json
├── server.js
└── uploads
This is an ongoing and incomplete project, do not use it in production before observing security practices