Assume that you are the CTO for the outsourcing firm which has been chosen to build an admission form for the Yoga Classes which happen every month. Requirements for the admission form are:
- Only people within the age limit of 18-65 can enroll for the monthly classes and they will be paying the fees on a month-on-month basis. I.e. an individual will have to pay the fees every month and he can pay it any time of the month.
- They can enroll any day but they will have to pay for the entire month. The monthly fee is 500/- Rs INR.
- There are a total of 4 batches a day namely 6-7AM, 7-8AM, 8-9AM and 5-6PM. The participants can choose any batch in a month and can move to any other batch next month. I.e. participants can shift from one batch to another in different months but in same month they need to be in same batch.
I have used the following technologies to build the website
- Frontend is built with React.js
- Backend is built with Node.js, Express.js
- Database - MongoDB
- Additional Libraries: Axios (for API requests), Toastify (for notifications)
The project is organized into four main components:
- Login Page (
Login.js):
- Opening page with email and password fields.
- Submit button checks user login and payment status.
- Redirects users based on login and payment status.
- Signup button redirects to the registration page.
- Registration Page (
Registration.js):
- Form for users to provide details: Name, Email, Password, Phone, Age, Date, Batch Timings.
- Validates user input and age range (18-65).
- Registration button redirects to the payment page.
- Payments Page (
Payment.js):
- Displays a congratulations message and user details.
- Form for users to fill in card details: Card Number, Card Holder Name, Expiry Date, CVV code.
- Validates card details before allowing payment.
- Make Payment button redirects to the confirmation page.
- Confirmation Page (
Confirmation.js):
- Displays a success message and additional user details after payment. - Fetches user details from the backend.
Project Structure
/api/login: Handles user login./api/register: Handles user registration./api/payment: Handles user payments./api/user/:id: Retrieves user details by ID.
CompletePayment(): Mock function to handle payments.
I have hosted my database in the mongoDB cloud. There is one collection (table) in my database:
- users
const userSchema = new mongoose.Schema({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
password: { type: String, required: true },
phone: { type: String, required: true },
age: { type: Number, required: true },
date: { type: String, required: true },
selectedBatch: { type: String, required: true },
feesPaid: { type: Boolean, default: false },
});
