/web-yapper-admin-user

This web application features a login page for users and a user management section for administrators. Users can update their profiles, including their names and photos, using a cropper tool. The application employs JavaScript to handle user interactions, fetch data from a backend server, and showcase a spinner during API calls.

Primary LanguageJavaScript

Project: User Profile Management

Overview

This project focuses on implementing a user profile management system with features like user login, profile updates, and admin functionalities. The application is built using a combination of frontend technologies (HTML, CSS, JavaScript) and a backend server (Node.js and Express). It utilizes Cloudinary for image storage and retrieval.

Prerequisites

  • Node.js and npm installed on your machine.

Getting Started

Installation

  1. Clone the repository:
git clone https://github.com/sainRaghuveer/web-yapper-admin-user.git
  1. Install all dependencies in both directories client and server
cd backend 
npm install

cd frontend 
npm install
  1. Set up the backend:
  • Rename the .env.example file to .env.
  • Configure the environment variables in the .env file, including the database connection details and any other necessary configurations.
  1. Set up the frontend:

  • Update the base_url with the appropriate URL for your backend server.

  • Start the application:

  • Start the backend server:

npm run server
  • Start the frontend development server:
use live server

Default Admin Credentials:

UserID: 1234
Password: 12345

Default User Credentials:

UserID: 3456
Password: 12345

Note:

  • Before doing anything first create .env file and put port , mongoURl.>
  • port is for listening the server.>
  • mongoURl is for running database and store your data in database so put your mongo link.>

The application will be accessible at local server.

Folder Structure

  • /backend: Contains the server-side code.

Endpoints

<>
METHOD ENDPOINT DESCRIPTION STATUS CODE
POST /login This endpoint should allow users to login. 200
POST /signup This endpoint should allow admin to register. 200
POST /api/admin/createUser This endpoint should allow Admin to create new user. 200
PATCH /api/admin/manage This endpoint should allow Admin to post new updates. 200
POST /user/update This endpoint should allow users to update photo and name. 200
POST /api/admin/getUsers This endpoint should allow admin to fetch users data. 200
GET /singleUser/:id This endpoint should allow get single user data. 200

Backend deployed link


  • frontend: Contains the client-side code.

Frontend deployed link

Technologies Used

  • Frontend: HTML, CSS, JavaScript, bootstrap
  • Backend: Node.js, Express
  • Database: MongoDB