Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dzervoudakes/user-management
Full stack CRUD app made with Express, React and TypeScript.
https://github.com/dzervoudakes/user-management
docker-compose express material-ui mongodb overnightjs react spa typescript user-management
Last synced: about 2 months ago
JSON representation
Full stack CRUD app made with Express, React and TypeScript.
- Host: GitHub
- URL: https://github.com/dzervoudakes/user-management
- Owner: dzervoudakes
- License: mit
- Created: 2020-08-19T11:51:22.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-09T02:02:16.000Z (about 3 years ago)
- Last Synced: 2024-11-01T21:42:22.597Z (2 months ago)
- Topics: docker-compose, express, material-ui, mongodb, overnightjs, react, spa, typescript, user-management
- Language: TypeScript
- Homepage:
- Size: 42.7 MB
- Stars: 8
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# User Management
> Full stack demo CRUD app built with Express, React and TypeScript.
[![client](https://github.com/dzervoudakes/user-management/workflows/Client/badge.svg)](https://github.com/dzervoudakes/user-management/actions)
[![server](https://github.com/dzervoudakes/user-management/workflows/Server/badge.svg)](https://github.com/dzervoudakes/user-management/actions)
[![codecov](https://codecov.io/gh/dzervoudakes/user-management/branch/main/graph/badge.svg)](https://codecov.io/gh/dzervoudakes/user-management)
[![quality](https://app.codacy.com/project/badge/Grade/373b659cba7b4b8cb0f275db57c3ef38)](https://www.codacy.com/gh/dzervoudakes/user-management/dashboard?utm_source=github.com&utm_medium=referral&utm_content=dzervoudakes/user-management&utm_campaign=Badge_Grade)
[![prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)## Premise
A simple User Management interface which lists current users in the system. Admins can add a new user, and update or delete existing users.
Originally written as a learning experience for React development, I've rebuilt this project to reflect new patterns and technologies
that I've adopted over time. Also the COVID-19 pandemic was a thing, so I had some extra time on my hands. 🦠 ⏰![demo](demo.gif)
## Technologies Used
- **Frontend:** React, TypeScript, Material UI
- **Backend:** Node + Express, OvernightJS, Mongoose
- **Database:** Docker, MongoDB
- **CI/CD:** GitHub Actions## Local Development
### Database and Server Setup
- Ensure that `Docker` is installed and running
- In your terminal, `cd` into the `server` directory and run `npm install`
- From the project root, open your terminal and run `docker compose up`
- Seed data for `admins` and `users` will be populated in the database automatically
- The server will be running on `http://localhost:3000`The `server/README.md` provides additional information on build scripts and environment variables.
### Client Setup
- In another terminal window, `cd` into the `client` directory and run `npm install`
- Run `npm start`
- The application may be accessed in a web browser at `http://localhost:8080`The `client/README.md` provides additional information on build scripts and environment variables.
## Technical Requirements
> The runtime environment for this application requires `node >= 14.6.0` and `npm >= 6.14.7`.
## Configuration
> This application makes use of `ESLint`, `Stylelint` and `EditorConfig`. Each of these features requires
> an extension be installed in order to work properly with IDEs and text editors such as VSCode.## Accessibility
> This application has been tested for accessibility via the [axe DevTools - Web Accessibility Testing](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) and [Accessibility Insights for Web](https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni) Chrome extensions.