https://github.com/aadityapanda/userregistration
This is a Full Stack-based user registration application that allows users to sign up, receive email verification, and log in. It includes user registration functionality with email verification using Nodemailer for sending verification emails.
https://github.com/aadityapanda/userregistration
expressjs full-stack js mysql nodejs react-hooks react-router react-router-dom reactjs sql user-registration
Last synced: 2 months ago
JSON representation
This is a Full Stack-based user registration application that allows users to sign up, receive email verification, and log in. It includes user registration functionality with email verification using Nodemailer for sending verification emails.
- Host: GitHub
- URL: https://github.com/aadityapanda/userregistration
- Owner: AadityaPanda
- License: mit
- Created: 2024-12-31T12:10:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-15T06:51:11.000Z (over 1 year ago)
- Last Synced: 2025-01-15T08:59:59.913Z (over 1 year ago)
- Topics: expressjs, full-stack, js, mysql, nodejs, react-hooks, react-router, react-router-dom, reactjs, sql, user-registration
- Language: JavaScript
- Homepage:
- Size: 588 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🔐 User Registration App
**A comprehensive Node.js user registration system with admin dashboard and email verification**
[](https://nodejs.org/)
[](https://expressjs.com/)
[](https://reactjs.org/)
[](https://mysql.com/)
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[](https://www.w3.org/Style/CSS/Overview.en.html)
---
## 📖 Overview
This is a full-stack Node.js application that provides a complete user registration system with email verification and an administrative dashboard. The application offers secure user management capabilities, allowing both regular users to register and authenticate, while providing administrators with comprehensive user management tools.
### 🎯 Key Capabilities
The application ensures secure user management and provides a seamless experience for both regular users and administrators through:
- **User Registration & Authentication** - Complete signup and login workflow
- **Email Verification System** - Automated email verification using Nodemailer
- **Administrative Dashboard** - Comprehensive user management interface
- **CRUD Operations** - Full create, read, update, and delete functionality
- **User Status Management** - Activate/deactivate user accounts
- **Automated Cleanup** - Scheduled removal of unverified accounts
---
## 📋 Table of Contents
- [🚀 Features](#-features)
- [🛠️ Tech Stack](#️-tech-stack)
- [📁 Project Structure](#-project-structure)
- [⚙️ Setup](#️-setup)
- [🔧 Installation](#-installation)
- [🛣️ Routes Overview](#️-routes-overview)
- [🧹 Scheduled Cleanup](#-scheduled-cleanup)
- [📄 License](#-license)
- [🤝 Contributing](#-contributing)
- [📞 Contact](#-contact)
---
## 🚀 Features
### 👥 User Features
- ✅ **User Registration** - Secure account creation
- ✅ **Email Verification** - Automated verification emails
- ✅ **User Authentication** - Login/logout functionality
- ✅ **User Dashboard** - Personal account interface
### 👨💼 Admin Features
- ✅ **Admin Dashboard** - Comprehensive management interface
- ✅ **User Management** - Create, edit, delete users
- ✅ **Account Control** - Activate/deactivate accounts
- ✅ **User Overview** - View all registered users
---
## 🛠️ Tech Stack
### Backend
### Frontend
### Database & Tools
---
## 📁 Project Structure
🔍 Click to expand project structure
```
📦 UserRegistration
├── 📁 backend/
│ ├── 📁 config/
│ │ └── 📄 db.js # MySQL database connection
│ ├── 📁 middleware/
│ │ ├── 📄 isAdmin.js # Admin verification middleware
│ │ └── 📄 requireLogin.js # Session check middleware
│ ├── 📁 routes/
│ │ ├── 📄 admin.js # Admin dashboard routes
│ │ ├── 📄 dashboard.js # User dashboard routes
│ │ ├── 📄 home.js # Home page routes
│ │ ├── 📄 login.js # Authentication routes
│ │ ├── 📄 logout.js # Session management
│ │ └── 📄 signup.js # User registration routes
│ ├── 📁 services/
│ │ └── 📄 emailService.js # Email sending service
│ ├── 📄 .env # Environment variables
│ ├── 📄 .env.example # Environment template
│ ├── 📄 cleanup.js # Automated cleanup task
│ └── 📄 server.js # Main server file
│
└── 📁 frontend/your-project-name/
├── 📁 src/
│ ├── 📄 App.jsx # Main React component
│ ├── 📄 main.jsx # React entry point
│ ├── 📁 components/
│ │ ├── 📁 AdminNavbar/
│ │ │ ├── 📄 AdminNavbar.css
│ │ │ └── 📄 AdminNavbar.jsx
│ │ ├── 📁 AdminSidebar/
│ │ │ ├── 📄 AdminSidebar.css
│ │ │ └── 📄 AdminSidebar.jsx
│ │ └── 📁 Navbar/
│ │ ├── 📄 Navbar.css
│ │ └── 📄 Navbar.jsx
│ ├── 📁 pages/
│ │ ├── 📄 Admin.jsx # Admin dashboard
│ │ ├── 📄 CreateUser.jsx # User creation
│ │ ├── 📄 Dashboard.jsx # User dashboard
│ │ ├── 📄 EditUser.jsx # User editing
│ │ ├── 📄 Home.jsx # Landing page
│ │ ├── 📄 Login.jsx # Authentication
│ │ ├── 📄 ManageUsers.jsx # User management
│ │ └── 📄 Signup.jsx # Registration
│ └── 📁 styles/
│ ├── 📄 Admin.css
│ ├── 📄 CreateUser.css
│ ├── 📄 Dashboard.css
│ ├── 📄 EditUser.css
│ ├── 📄 Home.css
│ ├── 📄 Login.css
│ ├── 📄 ManageUsers.css
│ └── 📄 Signup.css
├── 📁 public/
├── 📄 index.html
├── 📄 package.json
└── 📄 vite.config.js
```
---
## ⚙️ Setup
### 📋 Prerequisites
Before you begin, ensure you have the following installed:
| Requirement | Version | Description |
|-------------|---------|-------------|
|  | 14.x or above | JavaScript runtime |
|  | Latest | Database server |
|  | Latest | Version control |
|  | Latest | Frontend framework |
---
## 🔧 Installation
### 🖥️ Backend Setup
📥 Step 1: Clone the Repository
```bash
git clone https://github.com/AadityaPanda/UserRegistration.git
cd backend
```
📦 Step 2: Install Dependencies
```bash
npm install
```
🔧 Step 3: Environment Configuration
Create your environment file:
```bash
cp .env.example .env
```
Configure your `.env` file with the following variables:
```env
# 🗄️ Database Configuration
DB_HOST=your_database_host
DB_USER=your_database_user
DB_PASSWORD=your_database_password
DB_NAME=your_database_name
# 🔐 Session Configuration
SESSION_SECRET=your_session_secret
# 🌐 Server Configuration
PORT=3000
BASE_URL=http://localhost:3000
# 📧 SMTP Configuration
SMTP_HOST=your_smtp_host
SMTP_PORT=587
EMAIL_USER=your_email_address
EMAIL_PASS=your_email_password
SMTP_SECURE=false
```
### 🗄️ Database Setup
📊 Step 4: Database Configuration
Execute the following SQL commands to set up your database:
```sql
-- Create the database
CREATE DATABASE myform;
-- Switch to the database
USE myform;
-- Create the users table
CREATE TABLE users (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
middlename VARCHAR(30),
lastname VARCHAR(30) NOT NULL,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(64) NOT NULL,
mobile_no VARCHAR(15) NOT NULL,
email VARCHAR(50) NOT NULL UNIQUE,
isAdmin BOOLEAN DEFAULT FALSE,
verified BOOLEAN DEFAULT FALSE,
active BOOLEAN DEFAULT TRUE
);
-- Create an admin user
UPDATE users SET isAdmin = TRUE WHERE username = 'admin';
-- Reset auto-increment
ALTER TABLE users AUTO_INCREMENT = 1;
```
🚀 Step 5: Start the Backend Server
```bash
npm start
```
✅ Backend server will be running at `http://localhost:3000`
### 🎨 Frontend Setup
⚛️ Step 1: Create React Frontend
```bash
cd frontend
npm create vite@latest your-project-name -- --template react
cd your-project-name
```
📦 Step 2: Install Frontend Dependencies
```bash
npm install
```
🏗️ Step 3: Build and Run
```bash
# Create production build
npm run build
# Start development server
npm run dev
```
✅ Frontend will be running at `http://localhost:5173`
---
## 🛣️ Routes Overview
🌐 Route
📝 Description
🔒 Access
/
🏠 Landing page
🌍 Public
/signup
📝 User registration
🌍 Public
/login
🔐 User authentication
🌍 Public
/dashboard
👤 User dashboard
🔒 Authenticated
/admin
👨💼 Admin homepage
🛡️ Admin only
/admin/user
👥 User management
🛡️ Admin only
/admin/create
➕ Create new user
🛡️ Admin only
/admin/edit/:id
✏️ Edit user details
🛡️ Admin only
---
## 🧹 Scheduled Cleanup
The application includes an automated cleanup system (`cleanup.js`) that:
- 🕐 **Runs every hour** to maintain database hygiene
- 🗑️ **Removes unverified users** whose verification tokens have expired
- 📧 **Prevents spam registrations** by cleaning up abandoned accounts
- ⚡ **Optimizes database performance** by removing inactive records
This ensures your database stays clean and performs optimally over time.
---
## 📄 License
[](https://choosealicense.com/licenses/mit/)
**This project is licensed under the MIT License**
Feel free to use, modify, and distribute it in your projects.
---
## 🤝 Contributing
We welcome contributions! Here's how you can help improve this project:
### 🔧 Development Workflow
1. **🍴 Fork the repository**
2. **🌿 Create a feature branch**
```bash
git checkout -b feature/YourFeatureName
```
3. **💾 Commit your changes**
```bash
git commit -m "Add YourFeatureName"
```
4. **📤 Push to the branch**
```bash
git push origin feature/YourFeatureName
```
5. **🔄 Open a pull request**
### 📋 Contribution Guidelines
- 🧪 Ensure all tests pass before submitting
- 📝 Update documentation for new features
- 🎨 Follow the existing code style
- 💬 Provide clear commit messages
Check [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
---
## 📞 Contact
**👨💻 Aaditya Panda**
[](mailto:aadityapanda23@gmail.com)
[](https://github.com/AadityaPanda)
---
💝 **Thank you for using the User Registration App!**
*If you found this project helpful, please consider giving it a ⭐ on GitHub!*