From fc180c07d1b118b5daaf3564138b0ab4b543b4c9 Mon Sep 17 00:00:00 2001 From: Abhrajit Das Date: Mon, 26 Aug 2024 21:13:17 +0530 Subject: [PATCH] feat: added signout and readme.md --- .../React(Frontend)+Nodejs(Backend)/README.md | 101 ++++++++++++++++++ .../client/src/components/Header.jsx | 80 +++++++++++--- .../server/.env.example | 2 + .../server/controllers/user.controller.js | 9 ++ .../server/routes/user.route.js | 3 +- 5 files changed, 180 insertions(+), 15 deletions(-) create mode 100644 templates/FullStack/React(Frontend)+Nodejs(Backend)/server/.env.example diff --git a/templates/FullStack/React(Frontend)+Nodejs(Backend)/README.md b/templates/FullStack/React(Frontend)+Nodejs(Backend)/README.md index e69de29..75b62db 100644 --- a/templates/FullStack/React(Frontend)+Nodejs(Backend)/README.md +++ b/templates/FullStack/React(Frontend)+Nodejs(Backend)/README.md @@ -0,0 +1,101 @@ +# FullStack Template: React + Node.js + +This repository provides a simple FullStack template for building modern web applications using React for the frontend and Node.js for the backend. It includes essential features such as user authentication, session management, and a responsive user interface. + +## Features + +- **User Authentication**: Supports user registration and login with session management. +- **Frontend**: Built with React, offering a dynamic and responsive user interface. +- **Backend**: Powered by Node.js with Express, providing a robust RESTful API. +- **API Integration**: Seamless communication between the frontend and backend through API calls. +- **Session Management**: Utilizes Express sessions to manage user states. +- **Responsive Design**: Ensures the application is accessible on various devices. + +## Technologies Used + +### Frontend + +- **React**: A JavaScript library for building user interfaces. +- **Bootstrap**: For responsive and mobile-first UI design. +- **React Router**: Handles navigation and routing in the application. + +### Backend + +- **Node.js**: A JavaScript runtime built on Chrome's V8 JavaScript engine. +- **Express**: A minimal and flexible Node.js web application framework. +- **MongoDB**: A NoSQL database known for its flexibility and scalability. +- **Mongoose**: An elegant MongoDB object modeling for Node.js. + +## Installation +1. **Populate the .env.example file**: + + ```bash + MONGO_URL + JWT_SECRET + ``` + +2. **Install the required dependencies**: + + ```bash + npm install + ``` + +3. **Ensure MongoDB is running**: + - Make sure your MongoDB server is running locally or accessible remotely. + +4. **Run the application**: + + ```bash + npm run dev + both client and server + ``` + +5. **Access the application**: + + Visit `http://localhost:5173/` in your web browser. + +## Routes and Functionalities + +- **`/register` [GET, POST]**: + - **GET**: Renders the registration page where new users can sign up. + - **POST**: Handles the form submission for user registration. If the username is already taken, it flashes an error message. Otherwise, it creates a new user and redirects to the login page with a success message. + +- **`/signin` [POST]**: + - **GET**: Renders the login page where users can log in with their credentials. + - **POST**: Handles the login form submission. If the credentials are correct, it logs the user in by storing their user ID in the session and redirects to the dashboard. If the credentials are incorrect, it flashes an error message. + +- **`/signup` [POST]**: + - Displays the dashboard page if the user is logged in. If not, it redirects to the login page. + +- **`/logout` [POST]**: + - Logs the user out by clearing their session and redirects them to the home page. + +- **`/` [GET]**: + - Renders the homepage of the application. + +## Flash Messages + +The application uses flash messages to communicate the following events to the user: + +- **Signup**: + - **Success**: "Signup successful. Please signin." + - **Error**: "Username already exists. Please choose a different one." + +- **Signin**: + - **Error**: "Invalid username or password. Please try again." + +These messages are displayed on the frontend in the registration and login pages. + +## Database + +The application uses MongoDB for storing user information. The `users` collection in the MongoDB database contains the following fields for each user: + +- **_id**: ObjectId, the unique identifier for each document (user). +- **username**: String, unique, cannot be null. +- **emailid**: String, unique, cannot be null. +- **password**: String, hashed, cannot be null. + +--- + +Made using [Universal-Box](https://github.com/Abhishek-Mallick/universal-box) + diff --git a/templates/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Header.jsx b/templates/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Header.jsx index 5fc3a84..906c87e 100644 --- a/templates/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Header.jsx +++ b/templates/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Header.jsx @@ -1,31 +1,83 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; import 'bootstrap/dist/css/bootstrap.min.css'; import logo from '../public/logo.webp'; // Ensure this path is correct function Header() { + const [isSignedIn, setIsSignedIn] = useState(false); + const navigate = useNavigate(); + + // Check sign-in status on component mount + useEffect(() => { + const signedInStatus = localStorage.getItem('isSignedIn'); + if (signedInStatus === 'true') { + setIsSignedIn(true); + } + }, []); + + const handleSignOut = async () => { + try { + const res = await fetch('http://localhost:3000/api/user/signout', { + method: 'POST', + }); + + if (!res.ok) { + const errorData = await res.json(); + console.log('Error:', errorData.message); + return; + } + + const data = await res.json(); + console.log('Sign out successful:', data.message); + setIsSignedIn(false); + localStorage.removeItem('isSignedIn'); + navigate('/signin'); // Redirect to sign-in page + } catch (error) { + console.error('Sign out error:', error.message); + } + }; + + const handleSignIn = () => { + // Simulate a sign-in process + setIsSignedIn(true); + localStorage.setItem('isSignedIn', 'true'); + }; + return ( diff --git a/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/.env.example b/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/.env.example new file mode 100644 index 0000000..1e5c075 --- /dev/null +++ b/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/.env.example @@ -0,0 +1,2 @@ +MONGO_URL +JWT_SECRET \ No newline at end of file diff --git a/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/controllers/user.controller.js b/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/controllers/user.controller.js index cd42493..90c68a5 100644 --- a/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/controllers/user.controller.js +++ b/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/controllers/user.controller.js @@ -1,3 +1,12 @@ export const test = (req, res) => { res.json({ message: 'API is working!'}); +}; + +export const signout = (req, res, next) => { + try { + res.clearCookie('access_token').status(200).json('USer has been signed out!!'); + + } catch (error) { + next(error); + } }; \ No newline at end of file diff --git a/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/routes/user.route.js b/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/routes/user.route.js index 5435205..54d4f29 100644 --- a/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/routes/user.route.js +++ b/templates/FullStack/React(Frontend)+Nodejs(Backend)/server/routes/user.route.js @@ -1,9 +1,10 @@ import express from "express"; -import { test } from "../controllers/user.controller.js"; +import { signout, test } from "../controllers/user.controller.js"; const router = express.Router(); router.get("/test", test); +router.post("/signout", signout); export default router; \ No newline at end of file