I have created a stylish full stack dummy landing page using html, css and javascript for frontend and node.js and express for backend. This project is a stylish dark-themed landing page for a fintech business, designed to be visually appealing and highly functional. It incorporates a modern and sleek design using a combination of black and blue colors, enhanced with a touch of purple. The backend handles user registration and stores user data in a MongoDB database.
Features Responsive Header and Footer: The header and footer are designed with a gradient effect, combining blue and black colors for a modern look. The navigation menu is positioned on the right side for a streamlined layout. Image Carousel: The landing page features a dynamic image carousel that cycles through three images every 3 seconds. Each image displays a different message, welcoming users to the website and providing information about Ekarth Ventures and their mission. User Data Form: A user-friendly form allows for the collection of user data, including username, password, gender, and skills. The form includes: Username Validation: Ensures the username is between 4 and 32 characters. Password Validation: Ensures the password is alphanumeric and contains at least one special character. Interactive Elements: Includes radio buttons for gender selection and a dropdown for selecting skills. Form Submission Feedback: Displays a success message upon valid submission and prevents submission if the criteria are not met. Enhanced User Experience: Leveraging Bootstrap for responsive design and custom CSS for a dark theme, the page provides a seamless user experience across devices. Express Server: Sets up an Express server to handle HTTP requests and serve static files. MongoDB Integration: Connects to a MongoDB database using Mongoose for easy data modeling and management. User Registration: GET /register: Serves the registration page. POST /register: Handles user registration by accepting user data (username, password, gender, skills) from the form, validating it, and storing it in the MongoDB database. Data Parsing: Uses body-parser middleware to parse incoming request bodies in a middleware before your handlers, available under the req.body property.