Giter Club home page Giter Club logo

users-manager's Introduction

User Management Application

This is a simple user management application built using Node.js, Express, MySQL2, Sequelize, React.js, and Axios.

The application allows you to perform basic CRUD (Create, Read, Update, Delete) operations on a users table.

Server

The server part of the application is structured as an MVC (Model-View-Controller) architecture, similar to Laravel.

Folder Structure

  • server
    • controllers: Contains the controllers responsible for handling HTTP requests and defining the application logic.
    • models: Contains the Sequelize models that define the structure of the users table.
    • routes: Contains the Express routes that map the HTTP endpoints to the appropriate controller methods.
    • migrations: Contains the Sequelize migration files that define the changes to the database schema.
    • config: Contains the configuration files for the database connection and other settings.

Sequelize

Sequelize is a powerful ORM library for Node.js that provides an easy-to-use interface for working with databases. It abstracts away the low-level SQL queries and allows you to interact with the database using JavaScript models and methods.

In this application, Sequelize is used to define the structure of the users table in the models/User.js file. The model defines the table columns, their data types, and any constraints or associations. Sequelize also generates SQL queries under the hood to perform database operations such as creating, reading, updating, and deleting records.

The config/database.js file sets up the Sequelize connection to the MySQL database using the configuration specified in the config/config.json file.

Sequelize migrations, located in the migrations directory, are used to version control and manage the changes to the database schema over time. Each migration file represents a set of database changes, such as creating or modifying tables, and can be executed to apply or revert the changes to the database.

Running the Server

To run the server, follow these steps:

  1. Navigate to the server folder:
cd server
  1. Install the dependencies:
npm install
  1. Create a new MySQL database.

  2. Set up the database connection by modifying the config/config.json file.

  3. Run the migrations to create the necessary tables:

npx sequelize-cli db:migrate
  1. Run the server:
npm start

The server will start running on http://localhost:3000.

Client

The client part of the application is built using React.js (Vite) and uses Axios for making HTTP requests. The application state is managed using context providers.

Folder Structure

  • client
    • src
      • assets: Contains the static assets and styles used in the application.
      • components: Contains the reusable components used in the application.
      • context: Contains the context providers for managing the application state and making HTTP requests.
      • pages: Contains the main pages of the application.
      • App.js: The main component that defines the application's context providers.
      • index.js: The entry point of the React application.

Running the Client

To run the client, follow these steps:

  1. Navigate to the client folder:
cd client
  1. Install the dependencies:
npm install
  1. Run the client:
npm run dev

The client will start running on http://localhost:5173.

Usage

Once both the server and client are running, you can open your web browser and access the user management application at http://localhost:5173.

The application allows you to perform the following operations:

  • View the list of users.
  • Create a new user.
  • Edit an existing user.
  • Delete a user.

The changes made in the application will be reflected in the database.

Screenshots

Screen Shot 2023-06-11 at 02 25 00 Screen Shot 2023-06-11 at 02 25 09 Screen Shot 2023-06-11 at 02 25 41

Contributing

Contributions are welcome! If you find any issues or want to add new features, please submit a pull request or open an issue.

License

This project is licensed under the MIT License

users-manager's People

Contributors

misterneo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.