nelg62/MiniProject2

Mini Project 2 User Management system / CRM

This is the second project I created as part of my course at the Institute of Data (IOD). After learning the fundamentals of backend development, we were tasked with building an app of our choice that combines our knowledge of both front-end and backend development. For this project, we learned about using Express for the backend and React for the front end. I decided to challenge myself by using Next.js for the front end.

This project is a user management system built using Next.js and Material-UI (MUI) for the front end and Express for the backend. The application allows users to log in, view a dashboard, and manage a list of users with functionalities such as adding, viewing, and editing user details.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Project Overview

This project is a basic user management application that utilizes Next.js as the frontend framework and Express.js as the backend. It incorporates features such as user authentication, dynamic routing, modals for adding and editing users, and the use of React Context for managing global state. The application demonstrates fundamental concepts like routing, state management, conditional rendering, and the integration of Material-UI components to build a user-friendly and responsive interface.

Key Features

• View a list of users and detailed user information.
• Add, edit, and delete users with confirmation modals.
• Basic User authentication and protected routes for dashboard access.

Project Structure Overview

Frontend (Next.js):

• Dashboard Pages:
  • dashboard/layout.jsx and dashboard/page.jsx: Layout and main page components for the dashboard.
• Login Pages:
  • login/layout.jsx and login/page.jsx: Layout and main page components for user login.
• User Management:
  • users/layout.jsx, users/page.jsx, userstable/layout.jsx, and userstable/page.jsx: Components for user listing and table views.
• Components:
  • AddUserForm.jsx, AddUserModal.jsx, Alert.jsx, AppBar.jsx, DeleteConfirmation.jsx, EditUserForm.jsx, LoginPage.jsx, Modal.jsx, UserList.jsx, UserTable.jsx, ViewUserInfoCard.jsx: Various reusable components for user forms, modals, alerts, tables, and more.
• Context:
  • UserContext.jsx: Handles state management and context for user data.
• Themes:
  • makingStyles.jsx: Defines custom styles for the application.

Backend (Express.js):

• Routes:
  • userDataController.js and userDataRoutes.js: Define routes and controllers for managing user data.
• Entry Point:
  • index.js: Main server entry point.
• Swagger Documentation:
  • swagger.json: Contains the Swagger documentation for the API.

(back to top)

Built With

FrountEnd

• 
• 
• 

Backend

• 
• 
• 

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

Installation

1. Clone the repo

   git clone https://github.com/nelg62/MiniProject2.git

BackEnd

2. Change directory of not already there

     cd miniproject2express

3. Install NPM packages

      npm install

4. Run project (Back End)

   npm start

FrountEnd

5. Change directory if not already there

    cd miniproject2nextjs

6. Install NPM packages

     npm install

7. Run project (Frount End)

   npm run dev

8. Browse to project

   http://localhost:3000

(back to top)

Usage

in progress...

(back to top)

Roadmap

• Host Frount end in cloud (Netlify)
• Host Backend in Cloud (Render)
• Tidy code and make moble responsive
• change styling to tailwind from MUI for mor customisability
• add more features sutch as inventory list and linking items to people
• add databse to store information
• add user login to manage and see spesific data depending on who loggs in and access depending on who logs in
• add companies or groups as an access

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Top contributors:

Contact

Glen Harding - glen.harding.nz@gmail.com

Project Link: https://github.com/nelg62/MiniProject2

(back to top)

Acknowledgments

(back to top)