Skip to content

Full stack CRUD app made with Express, React and TypeScript.

License

Notifications You must be signed in to change notification settings

dzervoudakes/user-management

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

User Management

Full stack demo CRUD app built with Express, React and TypeScript.

client server codecov quality prettier

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

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 and Accessibility Insights for Web Chrome extensions.