This project is a full-stack web application combining the power of:
- 🎨 CSS for sleek UI styling and 2D animations
- ⚙️ JavaScript for interactivity and dynamic behavior
- ⚛️ React for fast, component-based frontend
- 🌿 Node.js & Express for a robust backend API
- 🍃 MongoDB for scalable database management
It’s designed to demonstrate modern web development, with responsive layouts, API integration, and animated visuals that bring the interface to life.
View the showcased project from here: https://hacktopus404.github.io/frontend/
(Click on the html file highlighted in red to view the live webpage)
- 💠 Modern responsive layouts using Flexbox & Grid
- 🎨 Gradient borders, shadows, glassmorphism, and neumorphism
- 🔁 2D Animations using
@keyframes— smooth logo spins, hover effects, and transitions - 🧩 CSS variables for reusable themes and dark mode
- 🧠 Modular ES6+ code (import/export support)
- 📦 Form validation, DOM manipulation, API requests (Fetch)
- 🔄 Dynamic rendering & event handling
- ⚡ Asynchronous programming using async/await
- 🧱 Component-based UI for reusability and scalability
- 🔄 State management using useState, useEffect, and Context API
- 🚦 React Router for page navigation
- 🎬 Integration of CSS animations & SVG transitions
- ⚡ Optimized performance using React hooks and memoization
- 🧩 RESTful API creation with Express.js
- 🧾 Authentication using JWT / bcrypt
- 📡 CRUD operations with MongoDB
- ⚙️ Middleware for validation, error handling, and logging
- 🔐 Secure environment setup with
.env
- 🧱 Schema creation using Mongoose
- 📊 Store and retrieve user data efficiently
- 🗂️ Collections for users, posts, and logs
- 🔄 Seamless connection between backend & database
- 🎞️ Smooth SVG logo rotations using CSS keyframes
- 🌀 Hover-based transformations for icons and buttons
- 💡 Framer Motion (React) for modern, physics-based UI animations
- 🌈 Animated loaders and entry transitions
Make sure you have installed:
# Clone this repository
git clone https://github.com/yourusername/project-name.git
# Navigate into the folder
cd project-name
# Install dependencies
npm install
# Run the backend (Node.js)
npm run server
# In another terminal, start the React app
npm start