├── #1 Car Wash Booking System.md
├── #2 Meeting Room Booking System for Co-working spaces.md
├── #3 Car Rental Reservation System.md
├── #4 Bike Rental Service Website.md
├── #5 Sports Facility Booking Platform.md
├── Markdown Syntax Guide.md
├── Project Documentation Template.md
├── README.md
└── assets
├── Booking Page.jpg
├── Logomark.png
├── PH-Logo-Dark.png
├── banner5.png
├── dashboard-welcome.png
├── how-it-works-2.jpg
├── how-it-works-page.png
└── how_it_works_page.png
/#1 Car Wash Booking System.md:
--------------------------------------------------------------------------------
1 | 1. Car Wash Booking System
2 |
3 | ⚠️ Read the entire requirement thoroughly. Every detail must be carefully reviewed from start to finish.
4 |
5 | ---
6 |
7 | **Objective:**
8 |
9 | The Car Wash Booking System frontend is a user-friendly web application designed to simplify the car wash booking process. It features a Home Page with easy navigation, a hero section, and a quick booking call-to-action. Users can sign up or log in securely, browse and filter services, view detailed service information, and book time slots directly through the Service Details pages. The Admin Dashboard allows administrators to manage services, slots, and users. The User Dashboard provides personalized booking history.
10 |
11 | ---
12 |
13 | ### Public Pages
14 |
15 | **1. Home Page**
16 |
17 | - **Navigation Menu:** Links to key pages like Services, Booking, Login, and other essential sections.
18 | - **Hero/Branding Section:** An introductory section with a strong branding message and visuals to communicate the essence of the car wash service.
19 | - **Call-to-Action Button:** A prominent button encouraging users to book a service, redirecting them to the Services page.
20 | - **Featured Services:** Display up to six services with brief descriptions and images to highlight the most popular offerings.
21 | - **Review Section:**
22 | - **Input Field & Rating Component:**
23 | - Text area for feedback.
24 | - Star-based rating system (1-5 stars).
25 | - **Design:** The review section should be visually appealing, using engaging colors, icons, and animations to encourage users to leave feedback. Drawing inspiration from platforms like Dribble or Pinterest can help create an attractive and interactive design.
26 | - **Post-Submission Display:**
27 | - Display overall site's rating (average of submitted ratings).
28 | - Show last two user reviews with ratings and feedback.
29 | - **"See All Reviews" Button:** Redirects to the "Reviews" page where the user can see all the reviews.
30 | - **Redirection:** The user should be redirected to the home page after login, and if possible, directly to the review section on the
31 | home page which is optional.
32 | - **Black Overlay with Login Button:**
33 | - Display a black overlay above the review section if the user is not logged in.
34 | - Include a "Login" button on the overlay.
35 | - Upon clicking, the user is redirected to the login page.
36 | - After a successful login, redirect the user back to the review section or the home page..
37 | - Conditional Display: If the user is already logged in, the overlay should not be shown.
38 | - **Footer:** Links to relevant pages, contact information, and social media links.
39 |
40 | **2. User Authentication Pages**
41 |
42 | - **Sign Up Page:**
43 | - **Form Fields:** Name, email, password, phone number, address.
44 | - By default, every user will have the "USER" role. Initially, there should be an admin in the database. Later, that admin can promote a user to the "ADMIN" role.
45 | - **Functionality:**
46 | - Allows users to create a new account.
47 | - Form validation (e.g., correct email format).
48 | - Displays success or error messages based on the outcome.
49 | - **Login Page:**
50 | - **Form Fields:** Email, password.
51 | - **Functionality:** Login, token-based authentication, proper error messages.
52 | - **Please make sure to provide the admin login credentials when submitting the assignment.**
53 |
54 | **3. Services Page**
55 |
56 | - **Features:** List of all car wash services with descriptions, prices, and durations.
57 | - **Functionality:** Search, filter, and sort services (e.g., by price, duration).
58 |
59 | **4. Service Details Page**
60 |
61 | - **Features:** Detailed information about selected services, display available time slots.
62 | - Detailed information about the selected service.
63 | - Display available time slots for the selected service on the current date by default.
64 | - Booked time slots should be disabled and unclickable.
65 | - Available time slots should be clickable for selection.
66 | - Optional: A calendar to choose a date, with available slots appearing based on the selected date.
67 | - A "Book This Service" button appears after selecting a slot.
68 |
69 | **5. Booking Page**
70 |
71 | - **Features:**
72 | - **Left Side:** Display the selected service and time slot. Try to make the design attractive.
73 | - **Right Side:** A form for submitting user information (User name, email, selected time - auto-filled).
74 | - A "Pay Now" button for payment processing.
75 | - **Functionality:**
76 | - Upon clicking the "Pay Now" button, the user will be redirected to AAMARPAY, and the slot status associated with the booking will be marked as "booked."
77 | - Redirects the user to a success page after payment.
78 |
79 | **6. Error Pages**
80 |
81 | - **Features:** Custom 404 page for non-existent routes.
82 | - **Functionality:** Navigation options to guide users back to safe pages (e.g., Home, Login).
83 |
84 | ---
85 |
86 | ### Admin Pages
87 |
88 | **1. Admin Dashboard**
89 |
90 | - **Features:** Overview of recent bookings, user management, slot management, and service management.
91 | - **Functionality:**
92 | - Accessible only to admin users.
93 | - **Service Management:**
94 | - In the admin dashboard, the service data should be displayed in a tabular format.
95 | - When implementing the "Add Service" feature, a single "Add Service" button should be provided on the page. Upon clicking this button, a modal containing the service creation form will open. After the user completes and submits the form, the modal will close automatically, and the newly created service will be optimistically updated in the system, providing a real-time experience that enhances the overall user interaction.
96 | - In each row of the service data table, there should be action buttons for updating and deleting the service data.
97 | - Upon clicking the update button, the system should either open a modal. The fields within the form should be pre-populated with the selected service data, allowing for a smooth and efficient editing process.
98 | - Before deleting a service, there should be a confirmation pop-up to ensure that the user intends to proceed with the deletion.
99 | - **Slot Management:**
100 | - Ability to create and manage slots for services.
101 | - An admin should be able to update the slot status individually.
102 | - An admin should not be able to update the status of a booked slot
103 | - The admin is authorized to toggle the slot status between AVAILABLE and CANCELLED.
104 | - **User Management:**
105 | - View user bookings in a tabular form.
106 | - User management: view user list, edit user roles.
107 |
108 | ---
109 |
110 | ### User Pages
111 |
112 | **1. User Dashboard**
113 |
114 | - **Features:** Overview of bookings and account information.
115 | - **Functionality:**
116 | - Update profiles, and manage personal information.
117 | - **Past Bookings:** Displayed in tabular format.
118 | - **Upcoming Bookings:** Displayed in card format with a countdown timer.
119 |
120 | **2. Service Slot Countdown**
121 |
122 | - **Features:** After a user creates a booking, display a countdown timer that shows the time remaining until their selected slot. If multiple slots are selected, only the countdown for the immediate next slot will be shown in the navbar. Additionally, in the user's "Upcoming Bookings," a countdown for each booking will be displayed on the booking card.
123 |
124 | ---
125 |
126 | ### Bonus Requirements
127 |
128 | - **Service Comparison Feature:** Enable users to select and compare two or more services side by side. This feature should display the services’ features, prices, and durations, helping users make informed decisions.
129 | - **Scroll to Top Button:** Appears on scroll, allows quick return to the top of the page.
130 | - **UI/UX Improvements:** Focus on enhancing the user interface and experience by implementing design best practices, ensuring the application is intuitive, responsive, and visually appealing.
131 | - **GitHub Contributions:** Maintain a well-documented GitHub repository with a minimum of 15 commits. Each commit should represent meaningful progress, such as feature implementation, bug fixes, or UI enhancements.
132 |
133 | ### Deliverables
134 |
135 | - Fully functional frontend application integrated with the backend.
136 | - Responsive design for all pages.
137 | - User and Admin dashboards with described features.
138 | - Complete backend integration.
139 | - Clean, well-organized, and documented code.
140 | - Creative solutions to integration challenges.
141 |
142 | **[N.B: If backend updates are needed for Assignment 3 to meet these requirements, please adjust as necessary.]**
143 |
--------------------------------------------------------------------------------
/#2 Meeting Room Booking System for Co-working spaces.md:
--------------------------------------------------------------------------------
1 | 2. Meeting Room Booking System for Co-working spaces
2 |
3 | ⚠️ Read the entire requirement thoroughly. Every detail must be carefully reviewed from start to finish.
4 |
5 | * * *
6 |
7 |
8 | **Objective:**
9 | Our platform is designed to provide a seamless and intuitive experience for users booking meeting rooms. With a focus on user-friendly design, secure processes, and robust management tools, the system serves both regular users and administrators.
10 |
11 | ---
12 | #### **Public Pages**
13 |
14 | **1. Homepage / Landing Page**
15 | - **Header Section / Navbar:**
16 | - **Logo/System Name:** Positioned at the top left. Clicking redirects to the homepage.
17 | - **Navigation Links:** Home, Meeting Rooms, About Us, Contact Us, Login/Register.
18 | - **User Icon/Dropdown:**
19 | - **For Authenticated Users:** My Bookings, Logout.
20 | - **For Admins:** Dashboard, Logout.
21 |
22 | - **Hero Section:**
23 | - **Visual Appeal:** Large banner image or video of a modern workspace.
24 | - **Headline & Subheadline:**
25 | - Headline: "Book Your Ideal Meeting Room with Ease."
26 | - Subheadline: "Efficient, hassle-free room booking for all your meeting needs."
27 | - **CTA Button:** "Book Now" redirects to the Meeting Rooms page.
28 |
29 | - **Service Advertisement Section:**
30 | - **Highlighted Services:** Real-Time Availability, Instant Booking Confirmation, Flexible Scheduling, 24/7 Support.
31 |
32 | - **Featured Rooms Section:**
33 | - **Room Cards:**
34 | - Image, Room Name, Capacity, Price Per Slot, "See Details" Button.
35 | - **See More Button:** Redirects to the Meeting Rooms page.
36 |
37 | - **Extra Sections:**
38 | - **Why Choose Us?:** Highlights features like "Seamless Booking Experience" and "Secure Transactions."
39 | - **How It Works Section:**
40 | - Steps: Select a Room, Choose Date & Time, Confirm Booking.
41 | - Icons/Illustrations for each step.
42 | - **Customer Testimonials Section:**
43 | - Carousel with customer profile pictures, names, roles, and testimonials.
44 |
45 | - **Footer Section:**
46 | - **Contact Information:** Email, phone number, office address.
47 | - **Social Media Links:** Clickable icons.
48 | - **Additional Links:** Privacy Policy, Terms of Service.
49 |
50 | **2. About Us Page**
51 | - **Design Elements:**
52 | - Creative presentation with animations and visuals.
53 | - **Content Sections:**
54 | - **Our Mission:** Purpose and goals.
55 | - **Meet the Team:** Team member images and bios.
56 | - **Our Story:** Background and evolution.
57 |
58 | **3. Contact Us Page**
59 | - **Contact Information:**
60 | - Email, phone number, office address.
61 | - **Contact Form:**
62 | - **Form Fields:** Name, email, subject, message.
63 | - Basic animations for form elements.
64 |
65 | **4. Error Pages**
66 | - **Features:** Custom 404 page for non-existent routes.
67 | - **Functionality:** Navigation options to guide users back to safe pages (e.g., Home, Login).
68 |
69 | **5. User Authentication Pages**
70 |
71 | - **Sign Up Page:**
72 | - **Form Fields:** Name, email, password, phone number, address.
73 | - By default, every user will have the "USER" role. Initially, there should be an admin in the database. Later, that admin can promote a user to the "ADMIN" role.
74 | - **Functionality:**
75 | - Allows users to create a new account.
76 | - Form validation (e.g., correct email format).
77 | - Displays success or error messages based on the outcome.
78 | - **Login Page:**
79 | - **Form Fields:** Email, password.
80 | - **Functionality:** Login, token-based authentication, proper error messages.
81 | - **Please make sure to provide the admin login credentials when submitting the assignment.**
82 |
83 | **6. Meeting Rooms Page**
84 | - **Room Listings:**
85 | - **Card View Display:** Image, Room Name, Capacity, Price Per Slot, "See Details" Button.
86 | - **Search Functionality:**
87 | - **Search Bar:** Search by room name or keyword.
88 | - **Filtering Options:** Capacity, Price.
89 | - **Sort Options:** By Price Per Slot (ascending, descending).
90 | - **Clear Filter Button:** Resets all filters.
91 | - **Pagination:** If needed, depending on the project scope.
92 |
93 | ---
94 |
95 | #### **User Pages [Private/Protected Route]**
96 | **7. Room Details Page**
97 | - **Room Information:**
98 | - **Detailed Display:** Multiple Images, Room Name, Room No., Floor No., Capacity, Price Per Slot, Amenities.
99 | - **Book Now Button:** A "Book Now" button that navigates to the booking page.
100 |
101 | **8. Booking Process**
102 | - **Booking Form:**
103 | - **Date and Time Selection:** Calendar view (Allows users to choose a booking date), available time slots (Show available time slots for that selected date. (based on isBooked = false)).
104 | - **User Information Form:** Pre-filled with user details.
105 |
106 | **9. Confirmation and Payment / Checkout Page**
107 | - **Booking Summary:** Room name, date, time, cost, user info.
108 | - **Payment Selection Options:** Implement any payment system.
109 | - **Confirm Booking Button:** Finalize the booking.
110 | - **Confirmation Modal:** Booking details and thank you message.
111 |
112 | **10. My Bookings Page**
113 | - **Booking List:**
114 | - Display user all bookings with Room Name, Date & Time, and Status (Unconfirmed/Confirmed).
115 |
116 | ---
117 |
118 | #### **Admin Pages [Private for Admin Only]**
119 |
120 | **1. Admin Dashboard Page**
121 | - **Room Management:**
122 | - **Create Room Button:** Form for adding new rooms.
123 | - **Room List Table:** Room Name, Room No., Floor No., Capacity, PricePerSlot, Action Buttons (Update/Delete).
124 | - **Real-Time Updates:** Optimistic updates for create, update, and delete operations.
125 |
126 | - **Slots Management:**
127 | - **Create Slot Button:** Form for adding new slots.
128 | - **Slots List Table:** Room Name, Room No., Date, Start Time, End Time, Action Buttons (Update/Delete).
129 | - **Real-Time Updates:** Optimistic updates for create, update, and delete operations.
130 |
131 | - **Booking Management:**
132 | - **Booking List Table:** Room Name, User Name, Date & Time, Status (Confirmed/Unconfirmed).
133 | - **Actions:** Approve/Reject Bookings, Delete Bookings with confirmation prompt.
134 |
135 | ---
136 |
137 | ### **Bonus Features**
138 | - **Debounce API Calls:** Implement search debouncing.
139 | - **Animations:** Micro-animations for interactive elements.
140 | - **Integrate Payment:** Secure payment processing using AmarPay/SSLCOMMERCE/Stripe.
141 | - **Scroll to Top Button:** Implement a "Scroll to Top" button for easy navigation.
142 | - **GitHub Contributions:** Minimum of 15 commits with meaningful progress.
143 |
144 | ### **Deliverables**
145 | - Fully functional frontend application integrated with the backend.
146 | - Responsive design for all pages.
147 | - User and Admin dashboards with described features.
148 | - Complete backend integration.
149 | - Clean, well-organized, and documented code.
150 | - Creative solutions to integration challenges.
151 |
152 | ### **References for Idea Generation**
153 | - **Inspiration Sites:**
154 | - [Booking.com](https://www.booking.com/)
155 | - [Convene](https://www.convene.com/)
156 |
157 |
158 | **[N.B: If backend updates are needed for Assignment-3 to meet these requirements, please adjust as necessary.]**
159 |
--------------------------------------------------------------------------------
/#3 Car Rental Reservation System.md:
--------------------------------------------------------------------------------
1 | 3. Car Rental Reservation System
2 |
3 | ⚠️ Read the entire requirement thoroughly. Every detail must be carefully reviewed from start to finish.
4 |
5 | * * *
6 |
7 |
8 | ### **Frontend Requirements for Car Rental Reservation System**
9 |
10 | **Objective:**
11 |
12 | Create a user-friendly and responsive car rental reservation platform for customers and admins. The system should offer a smooth experience for browsing, booking, and managing cars while providing administrators with tools to manage inventory and reservations.
13 |
14 | * * *
15 |
16 | ### _Public Pages_
17 |
18 | #### **1\. Home Page**
19 |
20 | * **Header:**
21 | * Logo and company name.
22 | * Navigation menu: Home, About Us, Booking, Contact.
23 | * Login/Sign Up buttons.
24 | * **Hero Section:**
25 | * A large banner image showcasing cars with a prominent "Book Now" call-to-action button.
26 | * A search bar for quickly checking car availability based on location and dates.
27 | * **Featured Cars:**
28 | * A carousel or grid display of featured cars with images, brief descriptions, and pricing.
29 | * **Why Choose Us?**
30 | * Highlight unique selling points such as best prices, wide selection, and 24/7 support.
31 | * **Customer Testimonials:**
32 | * A section featuring reviews and ratings from satisfied customers.
33 | * **Footer:**
34 | * Links to social media profiles, privacy policy, terms of service, and contact information.
35 |
36 | #### **2\. Car Listing Page**
37 |
38 | * Display all available cars in a grid or list view.
39 | * Filters for car type (e.g., SUV, hybrid, sedan), price range, and other features or any other relevant fields.
40 | * Each car entry includes a brief description, image, pricing, and a "View Details" button.
41 |
42 | #### **3\. Car Details Page**
43 |
44 | * Detailed information about the selected car, including features, pricing, availability, and customer reviews.
45 | * High-quality images with zoom functionality.
46 | * Options to choose additional features like insurance, GPS, child seat, etc.
47 | * A prominent "Book Now" button leads to the booking page.
48 |
49 | #### **4\. About Us Page**
50 |
51 | * **Header:**
52 | * Consistent with the Home Page for a cohesive design.
53 | * **Company History:**
54 | * Details about the company’s founding year, mission, and vision.
55 | * **Our Team:**
56 | * Profiles of key team members with photos, names, and roles.
57 | * **Our Fleet:**
58 | * Information about the variety of cars available (economy, luxury, SUVs, etc.).
59 | * **Values & Commitment:**
60 | * Explanation of the company’s commitment to customer service, sustainability, etc.
61 | * **Contact Information:**
62 | * A dedicated section for contact details, including phone number, email, and physical address.
63 |
64 | ### 5\. Error Page:
65 |
66 | * Create a visually appealing 404 page that aligns with the overall theme of the site. This page should appear when the user navigates to a route that doesn't exist.
67 | * In case of an error from the backend API (e.g., "There is no car available right now." or any other message returned when no data is available), display the error message to the user.
68 | * Ensure that the page includes navigation options to help users find their way back to safe pages, such as Home and Login.
69 |
70 | #### **6\. User Authentication Pages**
71 |
72 | * **Sign Up Page:**
73 | * **Main Form:**
74 | * Fields: Name, Email Address, Password, Confirm Password, Phone Number (optional).
75 | * Terms & Conditions checkbox with a link to the document. (you may read the document using the link and use the checkbox for the consent).
76 | * **Buttons:**
77 | * Sign Up button.
78 | * Sign In Instead link for existing users.
79 | * **Footer:**
80 | * Links to Privacy Policy and Terms of Service.
81 | * **Validation & Error Handling:**
82 | * Real-time validation for email format and matching passwords.
83 | * Clear error messages for invalid inputs or if the email is already registered.
84 | * Redirect to the login page after successful registration.
85 | * **Sign In Page:**
86 | * **Main Form:**
87 | * Fields: Email Address, Password.
88 | * **Buttons:**
89 | * Sign In button.
90 | * Forgot Password? link to a password recovery page.
91 | * Sign Up Instead link for new users.
92 | * **Footer:**
93 | * Links to Privacy Policy and Terms of Service.
94 | * **Validation & Error Handling:**
95 | * Real-time email validation.
96 | * Error messages for incorrect email or password, with a link to recover the password.
97 | * Redirect to the dashboard after successful login.
98 |
99 | * * *
100 |
101 | ### _User Pages \[Private/Protected Route\]_
102 |
103 | #### **7\. User Dashboard (Manage User Data)**
104 |
105 | * **Overview:**
106 | * View personal information and booking history.
107 | * Update profile details, such as contact information and preferences.
108 | * **Booking Management:**
109 | * View upcoming and past bookings.
110 | * Options to modify or cancel existing bookings (after approval of the booking, the user will be unable to modify or cancel the booking).
111 | * **Payment Management:**
112 | * After returning the car a user will be able to pay the amount
113 | * Functionality to pay the amount.
114 |
115 | * * *
116 |
117 | ### _Admin Pages_ **_\[Private/Protected Route\]_**
118 |
119 | #### **8\. Admin Dashboard (Manage Cars) \[Private/Protected Route\]**
120 |
121 | * **Dashboard Overview:**
122 | * A summary view showing key statistics like total bookings, available cars, revenue, etc.
123 | * **Manage Cars:**
124 | * Add, update, or delete car listings with fields for car details (name, model, year, features, pricePerHour) etc.
125 | * Image upload functionality for car photos.
126 | * **Manage Bookings:**
127 | * View and manage customer bookings.
128 | * Options to approve, or cancel bookings.
129 | * **Manage Return Cars:**
130 | * **View and Manage Booked Cars:** Access and manage all cars that have been booked.
131 | * **Return Options:** Provide the option to return a car. When a car is returned, its status will be updated accordingly, reflecting the car's availability and the completion of the booking process.
132 | * **User Management:**
133 | * Manage customer and admin accounts.
134 | * 🚩 admin can change the access of a user. That means the admin can block/activate a user account. Admin can change the role of a user from user to admin if the admin wishes. (admin).🚩
135 | * **Reports: (Optional)**
136 | * **Generate and View:**
137 | * Generate detailed reports on car usage, revenue, and other key metrics, displayed with clear charts and graphs.
138 | * **Filtering:**
139 | * Filter reports by daily, weekly, monthly, and yearly intervals for easy comparison.
140 | * **Printing:**
141 | * Print reports directly from the platform, with an optimized layout for clarity.
142 |
143 | * * *
144 |
145 | ### _User/Admin Pages_ **_\[Private/Protected Route\]_**
146 |
147 | #### **9\. Booking Page**
148 |
149 | * **Search Form:**
150 | * 🚩 Fields for car type, features, and other relevant criteria.🚩
151 | * 🚩 Optional: Fields for selecting location, pick-up and drop-off dates, car type, and other relevant criteria.🚩
152 | * **Search Results:**
153 | * Display a list of available cars based on the search criteria, with each car showing a brief description, image, pricing, and a "Book Now" button.
154 | * **Car Details:**
155 | * Detailed information about the selected car, including features, insurance options, and cancellation policy.
156 | * **Booking Form:**
157 | * Input fields for personal details **(NID/Passport, Driving License must)**, payment information, and additional options (e.g., GPS, child seat).
158 | * **Booking Confirmation:**
159 | * A confirmation page displaying the booking details, where the user can review their information before finalizing the reservation.
160 |
161 |
162 |
163 | * * *
164 |
165 | #### **Responsive Design & UI/UX Requirements**
166 |
167 | * Ensure all pages are fully responsive and provide a seamless experience across devices (mobile, tablet, desktop).
168 | * Implement intuitive and user-friendly navigation.
169 | * Use consistent branding elements (colors, fonts, logo) throughout the site.
170 |
171 | * * *
172 |
173 | #### **Bonus Feature**
174 |
175 | * **Payment System:**
176 | * A user can pay the amount after returning the car.
177 | * Integrate a secure payment gateway for processing online payments.
178 | * Support for multiple payment methods (AmarPay/SSLCommerz any of these local payment methods).
179 | * Display a summary of charges before confirming the payment.
180 | * A confirmation page with a payment receipt.
181 | * **Theme switcher:**
182 | * Dark/light/system theme switch.
183 |
184 | * * *
185 |
186 | ### **Deliverables**
187 |
188 | * Fully functional frontend application integrated with the backend.
189 | * Responsive design for all pages.
190 | * User and Admin dashboards with described features.
191 | * Complete backend integration.
192 | * Clean, well-organized, and documented code.
193 | * Creative solutions to integration challenges.
194 |
195 | ### **References for Idea Generation**
196 |
197 | * **Inspiration Sites:**
198 | * [Car Rentals: Find Cheap Car Rentals & Rental Car Deals - KAYAK](https://www.kayak.com/cars)
199 | * [Convene](https://www.gorentals.co.nz/?utm_source=Bing&utm_medium=PPC&utm_campaign=Bing_INT-PPC-Generic&msclkid=872dc177ebc219b805dda7b154721038)
200 |
201 | * * *
202 |
203 | **\[ N.B: If you need any modification in the backend of Assignment-3 to meet the above requirements, feel free to do so. \]**
204 |
205 |
206 |
--------------------------------------------------------------------------------
/#4 Bike Rental Service Website.md:
--------------------------------------------------------------------------------
1 | 4. Bike Rental Service Website
2 |
3 | ⚠️ Read the entire requirement thoroughly. Every detail must be carefully reviewed from start to finish.
4 |
5 | ---
6 |
7 |
8 | **Objective:**
9 | Develop a user-friendly, functional frontend for a Bike Rental Booking System. This system should integrate with the backend from **Assignment 3** and provide a seamless user experience with authentication, bike management, booking, and advanced features.
10 |
11 | ---
12 |
13 | #### **Public Pages**
14 |
15 | **1. Navbar & Footer**
16 | - **Navbar:**
17 | - **Logo:** Positioned at the top left, clicking redirects to the home page.
18 | - **Menu Items:** Links to Home, About Us and other necessary routes that may be conditional based on user role.
19 | - **Authentication Links:** Login/Sign Up (if not logged in), Logout (if logged in).
20 |
21 | - **Footer:**
22 | - **Social Media Icons:** Links to social profiles.
23 | - **Website Links:** Privacy Policy, Terms of Service, Contact Us.
24 |
25 | **2. Home Page**
26 | - **Hero Section:**
27 | - **Banner:** Background image or video related to bikes.
28 | - **Information:** Prominent call-to-action and a search bar for bike availability.
29 |
30 | - **Featured Section:**
31 | - **Available Bikes:** Display bikes with brand names, images, and a "View Detail" button.
32 |
33 | - **Testimonials:**
34 | - **Reviews:** Short quotes from satisfied customers.
35 |
36 | - **Why Choose Us:**
37 | - **Benefits:** Key selling points (e.g., best prices, wide selection, excellent customer service).
38 |
39 | - **Coupons & Discounts Section (Bonus):**
40 | - **Promotions:** Highlight active discounts or coupon codes.
41 | - **Usage:** Brief instructions on applying coupons.
42 |
43 | - **Contact Us Section:**
44 | - **Form:** Fields for name, email, message, and a submit button.
45 |
46 | **3. About Us Page**
47 | **Purpose:** Provide information about the organization.
48 |
49 | - **Mission Statement:**
50 | - **Description:** Platform’s purpose and values.
51 |
52 | - **Team Section:**
53 | - **Profiles:** Photos and bios of key team members.
54 |
55 | - **History & Milestones:**
56 | - **Timeline/Narrative:** Organization’s journey and achievements.
57 |
58 | - **Contact Information:**
59 | - **Details:** Office address, phone number, email.
60 |
61 | **4. User Authentication**
62 | - **Sign Up Page:**
63 | - **Form Fields:** Name, Email, Password, Phone, Address.
64 | - **Validation:** Ensure all fields are correctly filled and required.
65 | - **Success Redirect:** To login page with a success message.
66 |
67 | _**Note:** By default, every user will have the "USER" role. Initially, there should be an admin in the database. Later, that admin can promote a user to the "ADMIN" role._
68 |
69 | - **Login Page:**
70 | - **Form Fields:** Email, Password.
71 | - **Validation:** Ensure fields are filled and correct.
72 | - **Success Redirect:** To dashboard.
73 |
74 | - **Protected Dashboard Routes:**
75 | - **Access Control:** Ensure only authenticated users(Admin/User) can access certain routes.
76 | ---
77 |
78 | ### **User Dashboard [Private/Protected Route]**
79 |
80 | **5. User Profile Management**
81 | - **Profile Page:**
82 | - Welcome Message: Personalized greeting with user’s name.
83 | - Display user details such as Name, Email, Phone, Address and if you want you can add other information
84 | - Allow users to update their profile information.
85 |
86 | **6. Bike Management (public)**
87 |
88 | You can keep the Bike List on navbar
89 | - **Bike Listing Page:**
90 | - **Display:** List of available bikes with necessary information, a View Detail Button
91 | - **Filter:** Implement filter system to filter bike based on brand, model, availability, etc.
92 | - **View Detail Button:** Redirects to the Bike Detail Page.
93 |
94 | - **Bike Detail Page:**
95 | - Display detailed information about the selected bike (Description, Price, CC, Year, Brand, Availability and you can other information if you want). There will be a Book Now button. Redirect users to the booking process.
96 |
97 | Note: If not logged in, users need to log in to book a bike
98 |
99 | **7. Rental Management**
100 | - **Booking Process:**
101 | - **Book Now Button:** On click, open a modal/form with fields like Start Time and a pay button redirecting user to the payment page with advanced payment of tk 100. After successful payment booking will be confirmed. .
102 | - **Rental Confirmation:** Show a confirmation message and update bike availability.
103 |
104 | - **My Rentals Page:**
105 | - **Tabs:** Implement tab system having two tabs - Paid and Unpaid. By default, the Unpaid Tab will be active
106 | - **Paid Tab:** List of rentals with details like Bike Name, Start Time, Return Time, and Total Cost.
107 | - **Unpaid Tab:** Similar to Paid, but includes a "Pay" button.
108 | - **Pay Button:** Redirect users to the Payment Page.
109 |
110 | **Note:** Upon successful payment, move the rental to the **Paid** tab.
111 |
112 | ---
113 |
114 | ### **Admin Pages [Private for Admin Only]**
115 |
116 | **8. Admin Profile Management**
117 |
118 | - **Profile Page:** Same functionalities described in **User Profile Mangement**.
119 |
120 | **9. Bike Management**
121 |
122 | - **Display:** List of available bikes with necessary information, an update button and a delete button. Add filter system to bikes based on brand, model, availability, etc
123 |
124 | - **Create/Edit Button:**
125 | A Create/Edit button when clicked opens a modal.
126 | - **Fields:** Name, Description, Price, CC, Year, Model, Brand, etc.
127 | - **Validation:** Ensure all required fields are correctly filled.
128 |
129 | - **Update Button:**
130 | - Can update a bike information
131 | - The fields should be prefilled with existing data so that the admin can update a particular field only..
132 |
133 | - **Delete Button:**
134 | - **Confirmation Dialog:** Before bike deletion.
135 |
136 | **10. User Management**
137 | - **User Management:**
138 | - **Actions:** Delete users or promote users to admin.
139 |
140 | **11. Return Bike**
141 | - Return Process:
142 | Admins can view a list of rental details and use a "Calculate" button to update status and calculate cost by submitting the end time. The cost will be shown in **Rental page** of the user side.
143 |
144 | - Success Handling:
145 | Upon successful return, show a message like "Bike returned successfully" and update the rental status.
146 |
147 | **12. Coupon Management: (Bonus)**
148 | - The admin can create and manage all coupon codes.
149 |
150 | ---
151 |
152 | #### **Error Handling**
153 | - **Error Messages:**
154 | - **API Failures:** Display via Toast notifications.
155 | - **Validation Errors:** Show next to form fields.
156 |
157 | - **No Data Handling:**
158 | - **Friendly Messages:** When no bikes or rentals are available.
159 |
160 | - **404 Page:**
161 | - **Custom Design:** For unmatched routes.
162 |
163 | ---
164 |
165 | #### **UI/UX**
166 | - **UI/UX Quality:**
167 | - **Design:** Clean, modern, and user-friendly.
168 | - **Design Principles:** Consistent color schemes and typography.
169 | - **User Experience:** Smooth navigation and intuitive controls.
170 |
171 | - **Responsiveness:**
172 | - **Cross-Device Compatibility:** Fully responsive on mobile, tablet, and desktop.
173 |
174 | ---
175 |
176 | #### **Bonus Features**
177 | - **Coupon Functionality:**
178 |
179 | - **User Experience:** Coupons will be available in the homepage for users to apply them for a discount on their rentals.
180 | - **Gamified Feature:** Users can spin a wheel to win discounts of varying percentages, such as 10%, 20%, or 30%.
181 |
182 | **Note:** Once the wheel lands on a discount, a modal will pop up displaying the coupon code associated with the selected discount. The modal will include a "Copy" button, making it easy for users to copy the coupon code. Additionally, the coupon code will automatically appear on the Rental page for the specific rental, ensuring that users can apply their discount seamlessly during the checkout process.
183 |
184 | - **Side-by-Side Comparison:**
185 | - **Comparison Tool:** Allow users to compare multiple bikes, highlighting key features.
186 |
187 | - **Micro-Animations:**
188 | - **Interactive Elements:** Use subtle animations to enhance user experience.
189 |
190 | - **Dark Mode:**
191 | - **Theme Switcher:** Toggle between light and dark mode using TailwindCSS.
192 |
193 | ---
194 |
195 | ### **Deliverables**
196 | - Fully functional frontend application integrated with the backend.
197 | - Responsive design for all pages.
198 | - User and Admin dashboards with described features.
199 | - Complete backend integration.
200 | - Clean, well-organized, and documented code.
201 | - Creative solutions to integration challenges.
202 |
203 | ### **References for Idea Generation**
204 | - **Inspiration Sites:**
205 | - [Bike Share](https://www.bikeshare.com/)
206 | - [Spinlister](https://www.spinlister.com/)
207 |
208 | **[N.B: If backend updates are needed for Assignment-3 to meet these requirements, please adjust as necessary.]**
209 |
--------------------------------------------------------------------------------
/#5 Sports Facility Booking Platform.md:
--------------------------------------------------------------------------------
1 | 5. Sports Facility Booking Platform
2 |
3 | ⚠️ Read the entire requirement thoroughly. Every detail must be carefully reviewed from start to finish.
4 |
5 | ---
6 |
7 | **Objective:** The goal of this assignment is to integrate the frontend with the backend system developed in **Assignment 3**, which is a sports facility booking platform. You may update your backend as needed for the frontend implementation. This integration will involve creating a fully functional user interface that communicates with the backend via API calls. Additionally, you'll need to add both a user dashboard and an admin dashboard, ensuring a smooth and user-friendly experience for booking sports facilities.
8 |
9 | * * *
10 |
11 | # Detailed Requirements:
12 |
13 | ## Main Requirements:
14 |
15 | ### 1\. **Landing Page:**
16 |
17 | * **Purpose:** Acts as the gateway to the platform, offering a general overview and guiding users to specific actions like booking a facility or logging in.
18 | * **Components:**
19 | * **Header:** Includes logo, navigation menu, and login/registration buttons.
20 | * **Hero Section:** A visually appealing banner with a brief introduction and a "Book Now" call-to-action button.
21 | * **Featured Facilities:** Showcase a selection of popular facilities with images, names, and a brief description.
22 | * **How It Works:** A step-by-step guide explaining the booking process. The "How It Works" section on the landing page is designed to provide users with a clear and straightforward guide to the booking process on the platform. This section breaks down the process into simple, actionable steps to ensure users understand how to make the most of the platform's features.
23 |
24 | **Here the example design:**
25 | 
26 |
27 |
28 | *This design is just a concept. Please use it as inspiration and apply your own creative ideas.*
29 |
30 | * **Customer Testimonials:** A slider showcasing feedback from users who have successfully booked and used the facilities. You can implement this using static JSON data or develop an API to fetch and display dynamic data.
31 | * **Add One Unique Section:** Showcase your creativity by adding a unique component related to the project.
32 | * **Footer:** Contains links to the About Us, Contact Us, and social media pages.
33 |
34 | ### 2\. **Dashboard:**
35 |
36 | * **User Dashboard:**
37 | * **Purpose:** Allows users to manage their bookings, and access personalized content.
38 | * **Components:**
39 | * **Welcome Message:** Personalized greeting. **To retrieve user information, develop an API to fetch user data from the database.**
40 |
41 | **Here the example design:**
42 |
43 | 
44 |
45 | *This design is just a concept. Please use it as inspiration and apply your own creative ideas.*
46 |
47 | * **My Bookings:** List of bookings with options to view details, or cancel.
48 | * **Admin Dashboard:**
49 | * **Purpose:** Provides administrators with tools to manage facilities, bookings, and users.
50 | * **Components:**
51 | * **Welcome Message:** Personalized greeting. **To retrieve user information, develop an API to fetch user data from the database.**
52 |
53 | **Here the example design:**
54 |
55 |
56 |
57 | *This design is just a concept. Please use it as inspiration and apply your own creative ideas.*
58 |
59 | * **Facility Management:** Administrators can perform CRUD operations on sports facilities, including adding new facilities, editing existing details, and removing facilities. In backend, the facility model should be updated to include an "image" field. For image uploads, you can use services like Imgbb, Cloudinary, or static image links.
60 | * **Booking Management:** View all bookings.
61 | * **Add Admin:** In this section, an admin can create a new admin account. The form includes fields for the following details: name, email, password, phone number, role (automatically set to "admin"), and address. (Just like sign up process)
62 |
63 | ### 3\. **Login/Registration Page:**
64 |
65 | * **Purpose:** Allows users to access their accounts or create a new account.
66 | * **Components:**
67 | * **Login Form:** Email and password fields.
68 | * **Registration Form:** Fields for name, email, password, phone, role (automatically set to "user"), address and confirmation with a "Sign Up" button.
69 | * **Social Login:** Option to log in or register using social media accounts (optional).
70 | * **Error Handling:** Clear error messages for invalid credentials or registration errors.
71 |
72 | ### 4\. **About Us Page:**
73 |
74 | * **Purpose:** Provides information about the organization behind the platform.
75 | * **Components:**
76 | * **Mission Statement:** A brief description of the platform's purpose and values.
77 | * **Team Section:** Photos and bios of key team members.
78 | * **History & Milestones:** Timeline or narrative of the organization's journey and achievements.
79 | * **Contact Information:** Office address, phone number, and email.
80 |
81 | ### 5\. **Contact Us Page:**
82 |
83 | * **Purpose:** Allows users to get in touch with support or provide feedback.
84 | * **Components:**
85 | * **Contact Form:** Fields for name, email, subject, and message, with a "Submit" button.
86 | * **Map Integration:** An embedded map showing the office location (optional).
87 | * **Contact Details:** Phone number, email, and physical address.
88 |
89 | ### 6\. **Facility Listing Page:**
90 |
91 | * **Purpose:** Displays a list of all available(based on isDeleted = false) sports facilities .
92 | * **Components:**
93 | * **Search & Filters:** Options to search by facility name or location, and filters for pricing. (Frontend implementation)
94 | * **Facility Cards:** Each card includes an image, name, price per hour, and a "View Details" button that navigates to the facility details page.
95 |
96 | ### 7\. **Facility Details Page:**
97 |
98 | * **Purpose:** Provides detailed information about a specific sports facility.
99 | * **Components:**
100 | * **Facility Overview:** Images, name, location, price, and description.
101 | * **Booking Button:** A "Book Now" button that navigates to the booking page.
102 |
103 | ### 8\. **Booking Page:**
104 |
105 | * **Purpose:** The Booking Page serves as the interface where users can book a specific facility and check its availability. It guides the user through selecting a facility, checking available time slots, filling out booking details, and completing the booking process, including payment.
106 | * **Components:**
107 | * **Backend Update:** Update the logic to filter availability based on both the **date** and **facility** parameters in the `/api/check-availability` endpoint. **Add the `facility` query parameter to this endpoint.** Example endpoint: `GET /api/check-availability?date=2024-06-15&facility=jdw34iehdskedkoe3`
108 |
109 | The `/api/check-availability` endpoint will now filter available time slots based on both the **date** (in YYYY-MM-DD format) and the **facility ID**. The backend will validate these inputs and return the available slots for that date and facility. If no slots are available, it will return a message indicating this; if the input is invalid, it will return an error message. This makes checking availability more accurate.
110 | * **Facility Overview:** Show the key details of the selected facility.
111 | * **Availability Checker:**
112 | * **Description:** This is an interactive interface where users can select a date and check the availability of time slots for booking the chosen facility.
113 | * **UI Elements:**
114 | * Date Picker: An intuitive calendar control for selecting the desired booking date.
115 | * Check Availability Button: A button that triggers the availability check for the selected date and facility.
116 | * Availability Display: A section that shows available time slots after the check is performed.
117 | * **Booking Form:** Fields for booking details (e.g., date, startTime and endTime).
118 | * **Payment Integration:** Integration with SSL Commerz/AmarPay for secure payment processing.
119 | * **Confirmation:** Display a booking summary after successful booking.
120 |
121 | **Here the example design:**
122 |
123 | 
124 |
125 | *This design is just a concept. Please use it as inspiration and apply your own creative ideas.*
126 |
127 | ### 9\. **Error Pages**
128 |
129 | * **Features:** Custom 404 page for when a user navigates to a non-existent route.
130 | * Custom error messages for unauthorized access (e.g., trying to access admin pages as a regular user).
131 | * **Functionality:** Navigation options to guide users back to a safe page (e.g., Home, Login).
132 |
133 | ### **10\. UI/UX:**
134 |
135 | * **Design Principles:** Implement a clean, modern design with consistent color schemes and typography.
136 | * **User Experience:** sure smooth navigation, intuitive controls, and accessibility considerations.
137 | * **Responsiveness:** Ensure the website is fully responsive on mobile, tablet, and desktop devices.
138 |
139 | ## Bonus Requirements
140 |
141 | 1. **Scroll to Top Button**
142 | Implement a "Scroll to Top" button that becomes visible when users scroll down the page. This button should be easily accessible, allowing users to quickly return to the top of the page with a single click, enhancing navigation and the overall user experience.
143 |
144 | 2. **Pagination**
145 | Add pagination to the "Facility Listing" page to improve user experience by breaking down content into manageable sections, making it easier for users to browse through facilities.
146 |
147 | 3. **Error Handling**
148 | Implement consistent error message displays for any API failures using Toast notifications. Ensure that validation error messages are displayed directly on the relevant form fields for better user feedback.
149 |
150 | 4. **GitHub Contributions**
151 | Maintain a well-documented GitHub repository with at least 15 meaningful commits. Each commit should reflect significant progress, such as feature implementation, bug fixes, or UI enhancements.
152 |
153 | 5. **Professional README File**
154 | Ensure thorough documentation is available. This should encompass detailed instructions for project setup and execution, alongside pertinent details. **For a structured guide, refer to the [Project README File Template](./Project%20Documentation%20Template.md). Please adhere to this template or follow the [Markdown Syntax Guide](./Markdown%20Syntax%20Guide.md).**
155 |
156 | ---
157 |
158 | ### Deliverables:
159 |
160 | * Fully functional frontend application connected to the backend system.
161 | * Implementation of all the pages listed above with responsive design.
162 | * User and Admin dashboards with the features described.
163 | * Complete integration of the booking system with the backend.
164 | * The frontend must interact seamlessly with the backend.
165 | * The UI/UX design should be user-friendly, intuitive, and responsive.
166 | * Code should be clean, well-organized, and documented.
167 | * Creative and effective solutions to any challenges faced during the integration process.
168 |
169 | ###
170 | **[ N.B: If you need to add or update anything in the backend of Assignment-3 to meet the above requirements, feel free to do so. ]**
171 | ###
172 |
--------------------------------------------------------------------------------
/Markdown Syntax Guide.md:
--------------------------------------------------------------------------------
1 | # Markdown Syntax Guide
2 |
3 | ### **1. Structure and Layout**
4 |
5 | - **Title**: Use a clear, descriptive title at the top of the README.
6 | - **Introduction**: Provide a brief introduction or tagline that summarizes the project.
7 | - **Table of Contents**: Include a table of contents for easier navigation if the README is long.
8 | ```markdown
9 | ## Table of Contents
10 | - [Introduction](#introduction)
11 | - [Project Description](#project-description)
12 | - [Features](#features)
13 | - [Technology Stack](#technology-stack)
14 | - [Installation Guidelines](#installation-guidelines)
15 | - [Usage](#usage)
16 | - [Contributing](#contributing)
17 | - [License](#license)
18 | - [Contact](#contact)
19 | ```
20 |
21 | ### **2. Formatting Text**
22 |
23 | - **Bold Text**: Use `**text**` or `__text__` to emphasize important words or headings.
24 | ```markdown
25 | **Important Note**: This is a critical point.
26 | ```
27 | - **Italic Text**: Use `*text*` or `_text_` for emphasis or to denote terms.
28 | ```markdown
29 | *This is italicized text.*
30 | ```
31 | - **Strikethrough Text**: Use `~~text~~` to show deleted or obsolete information.
32 | ```markdown
33 | ~~This is no longer relevant.~~
34 | ```
35 |
36 | ### **3. Code and Syntax**
37 |
38 | - **Inline Code**: Use single backticks `` `code` `` for short code snippets within a line.
39 | ```markdown
40 | Use the `npm install` command to install dependencies.
41 | ```
42 | - **Code Blocks**: Use triple backticks (```) for multi-line code snippets, and specify the language for syntax highlighting.
43 | ```markdown
44 | ```javascript
45 | function helloWorld() {
46 | console.log("Hello, World!");
47 | }
48 | ```
49 | ```
50 |
51 | ### **4. Lists**
52 |
53 | - **Unordered Lists**: Use dashes `-`, asterisks `*`, or plus signs `+` for unordered lists.
54 | ```markdown
55 | - Item 1
56 | - Item 2
57 | ```
58 | - **Ordered Lists**: Use numbers followed by periods for ordered lists.
59 | ```markdown
60 | 1. First step
61 | 2. Second step
62 | ```
63 |
64 | ### **5. Links and Images**
65 |
66 | - **Links**: Use `[text](URL)` to add hyperlinks.
67 | ```markdown
68 | [GitHub](https://github.com)
69 | ```
70 | - **Images**: Use `` to include images. Ensure images are relevant and add value.
71 | ```markdown
72 | 
73 | ```
74 |
75 | ### **6. Tables**
76 |
77 | - **Tables**: Use pipes `|` and dashes `-` to create tables.
78 | ```markdown
79 | | Header 1 | Header 2 |
80 | | -------- | -------- |
81 | | Row 1 | Row 1 |
82 | | Row 2 | Row 2 |
83 | ```
84 |
85 | ### **7. Badges**
86 |
87 | - **Badges**: Include badges to show build status, version, or other metrics. Use Markdown syntax or embed HTML for badges.
88 | ```markdown
89 | 
90 | ```
91 |
92 | ### **8. Emojis**
93 |
94 | - **Emojis**: Use emojis to add a visual element to the README. This can make the document more engaging.
95 | ```markdown
96 | 🚀 **Deploying the project**
97 | ```
98 |
99 | ### **9. Links to Documentation**
100 |
101 | - **Documentation Links**: Link to external documentation, if available, for more detailed information.
102 | ```markdown
103 | For detailed setup instructions, see the [documentation](https://docs.example.com).
104 | ```
105 |
106 | ### **10. Contribution Guidelines**
107 |
108 | - **Contributing**: Provide instructions on how others can contribute to the project.
109 | ```markdown
110 | ## Contributing
111 | We welcome contributions! Please read our [contributing guide](CONTRIBUTING.md) for more details.
112 | ```
113 |
114 | ### **11. License Information**
115 |
116 | - **License**: Specify the license under which the project is distributed. Include a link to the full license text.
117 | ```markdown
118 | ## License
119 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
120 | ```
121 |
122 | ### **12. Contact Information**
123 |
124 | - **Contact**: Provide contact details for support or inquiries.
125 | ```markdown
126 | ## Contact
127 | **Project Maintainer**: [Your Name](mailto:your.email@example.com)
128 | ```
129 |
130 | ### **13. Additional Sections**
131 |
132 | - **FAQs**: Add a Frequently Asked Questions section if applicable.
133 | - **Acknowledgements**: Give credit to contributors, libraries, or tools that helped with the project.
134 | ```markdown
135 | ## Acknowledgements
136 | - Thanks to [Contributor Name](https://github.com/contributor) for their help.
137 | ```
138 |
139 | ### **14. Best Practices**
140 |
141 | - **Clarity**: Ensure that instructions and descriptions are clear and easy to understand.
142 | - **Consistency**: Maintain consistent formatting throughout the README.
143 | - **Keep it Updated**: Regularly update the README to reflect any changes in the project.
144 |
145 | Using these guidelines will help you create a well-organized, informative, and engaging README file for your project.
--------------------------------------------------------------------------------
/Project Documentation Template.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Comprehensive Project README Template
4 |
5 |
6 | ---
7 |
8 | # Project Name
9 |
10 | ## Introduction
11 |
12 | Brief introduction or tagline about the project.
13 |
14 | ## Project Description
15 |
16 | Detailed description of the project, including its purpose and goals.
17 |
18 | ## Features
19 |
20 | - List of key features or functionalities.
21 | - Bullet points are helpful for clarity.
22 |
23 | ## Technology Stack
24 |
25 | - List of technologies, frameworks, and tools used in the project.
26 | - Example: React, Redux, Node.js, MongoDB, etc.
27 |
28 | ## Installation Guideline
29 |
30 | Instructions on how to install, configure, and get the project running locally.
31 |
32 | ### Prerequisites
33 |
34 | - List any software or dependencies that need to be installed beforehand (if any).
35 |
36 | ### Installation Steps
37 |
38 | 1. Step-by-step instructions on how to install the project.
39 | 2. Provide code examples or commands for clarity.
40 |
41 | ### Configuration
42 |
43 | 1. Create a `.env` file in the root directory of the project.
44 | 2. Add necessary configuration variables in the `.env` file.
45 | Example:
46 | ```bash
47 | PORT=3000
48 | DB_URL=your_db_connection_uri
49 | API_KEY=your_api_key_here
50 | ```
51 | 3. Explain any specific configuration requirements or variables used in your project.
52 |
53 | ## Usage
54 |
55 | Instructions or examples for using the project. Include screenshots or code snippets if applicable.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | Welcome to Assignment 5! 🎉 In this assignment, your primary objective is to integrate the frontend with the backend system developed in **Assignment 3**. This assignment will challenge you to connect the user interface with the backend functionalities, ensuring a seamless flow of data and interaction between the client and server.
4 |
5 |
6 | ## 🛠️ Technology You Can Use
7 |
8 | - **Frontend Development:**
9 | - React
10 | - Redux
11 | - TypeScript
12 |
13 | - **Package Management:**
14 | - Any npm packages that are required for your project
15 |
16 | - **Additional Technologies:**
17 | - Feel free to incorporate any additional technologies that you deem necessary for your project
18 |
19 | ---
20 |
21 | ## 🔗 Objective
22 |
23 | The goal of this assignment is to build a fully functional web application by integrating a frontend with the backend system created in Assignment 3. This involves:
24 |
25 | - **Connecting your frontend** to the existing backend APIs.
26 | - **Implementing user and admin dashboards** with real-time data.
27 | - **Ensuring smooth interaction** and data flow between the frontend and backend systems.
28 | - **Applying UI/UX principles** to create a user-friendly interface.
29 |
30 |
31 | ## 🔗 Key Tasks
32 |
33 | 1. **Frontend Integration**: Connect the frontend with the backend endpoints to enable data retrieval, submission, and interaction.
34 | 2. **Dashboard Implementation**: Develop user and admin dashboards that display relevant data and analytics.
35 | 3. **UI/UX Design**: Design a clean, intuitive, and responsive user interface to enhance the user experience.
36 | 4. **Error Handling**: Implement proper error handling to manage and display errors gracefully.
37 | 5. **Testing**: Test the integration thoroughly to ensure that all functionalities work as expected.
38 |
39 |
40 | ## ⚙️ Guidelines
41 |
42 | - **Plagiarism Not Allowed**: Your submission must be your own work. Plagiarism will result in a score of 0.
43 | - **Meaningful Variable Names**: Use clear and descriptive variable names to improve code readability.
44 | - **Code Commenting**: Add comments to explain the purpose of your code sections and important logic. This will help others (and yourself) understand your code better.
45 | - **User Experience and Interface**: Prioritize a better user experience (UX) and user interface (UI). Make your application intuitive, easy to use, and visually appealing. **The UI/UX section is worth 7 marks.**
46 | - **Consistent Code Style**: Maintain a consistent coding style throughout the project. Follow best practices and coding standards for the technologies you are using.
47 | - **Error Handling**: Implement proper error handling for both frontend and backend to ensure a smooth user experience.
48 | - **Responsive Design**: Ensure that your application is responsive and works well on different screen sizes and devices.
49 | - **Documentation**: Ensure thorough documentation is available. This should encompass detailed instructions for project setup and execution, alongside pertinent details. **For a structured guide, refer to the [Project README File Template](./Project%20Documentation%20Template.md). Please adhere to this template or follow the [Markdown Syntax Guide](./Markdown%20Syntax%20Guide.md).**
50 | - **Version Control**: Use version control (e.g., Git) effectively. Commit your changes regularly with meaningful commit messages.
51 | - **Deployment**: Ensure that your application is deployed and accessible via the provided live deployment links. Test the deployment to ensure it works as expected.
52 |
53 | ### 📤 Submission Guidelines
54 |
55 | - **Submit a well-documented codebase** with clear comments.
56 | - **Add a README file** that explains how to set up and use the application. In the README, include details like the project name, live URL, features, technology used, and other important information. Make it look professional by doing some research and making it appealing.
57 |
58 | ### 📤 What You Need to Provide
59 |
60 | 1. **Live Deployment Link (Server and Client)**
61 | 2. **GitHub Repository Links (Server and Client)**
62 | 3. **Project Overview Video** (A brief video providing an overview of the project)
63 | 4. **Admin credentials and other credentials if necessary**
64 |
65 |
66 | ## 🔢 Assignment Number Based on the Last Digit of PH Student ID
67 |
68 | | Last Digit of PH Student ID | Assignment Number (Design No) |
69 | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
70 | | 0, 1 | [1. Car Wash Booking System](./1-%20Car%20Wash%20Booking%20System.md) |
71 | | 2, 3 | [2. Meeting Room Booking System for Co-working spaces](/#2%20Meeting%20Room%20Booking%20System%20for%20Co-working%20spaces.md) |
72 | | 4, 5 | [3. Car Rental Reservation System](./#3%20Car%20Rental%20Reservation%20System.md) |
73 | | 6, 7 | [4. Bike Rental Service Website](./#4%20Bike%20Rental%20Service%20Website.md) |
74 | | 8, 9 | [5. Sports Facility Booking Platform](./5-%20Sports%20Facility%20Booking%20Platform.md) |
75 |
76 |
77 |
78 | ### ⏰ **Deadline:**
79 |
80 | - 60 Marks: 29th August ⏳
81 | - 50 Marks: 30th August ⌛
82 |
83 |
84 | ***Note: The deadlines are final and will not be extended.***
85 |
86 | ## 🚫 **Important Note:**
87 |
88 | Plagiarism will not be tolerated. Ensure that the code you submit is your work. Any instances of plagiarism will result in 0 Marks ❌.
89 |
90 | ---
91 |
92 | By following these instructions, you'll be well-equipped to complete Assignment 5 successfully. Good luck! 🍀
93 |
--------------------------------------------------------------------------------
/assets/Booking Page.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apollo-Level2-Web-Dev/batch-03-assignment-05/15cb28d2ac1a0e5d818e54b5955b329fd0d8fa39/assets/Booking Page.jpg
--------------------------------------------------------------------------------
/assets/Logomark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apollo-Level2-Web-Dev/batch-03-assignment-05/15cb28d2ac1a0e5d818e54b5955b329fd0d8fa39/assets/Logomark.png
--------------------------------------------------------------------------------
/assets/PH-Logo-Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apollo-Level2-Web-Dev/batch-03-assignment-05/15cb28d2ac1a0e5d818e54b5955b329fd0d8fa39/assets/PH-Logo-Dark.png
--------------------------------------------------------------------------------
/assets/banner5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apollo-Level2-Web-Dev/batch-03-assignment-05/15cb28d2ac1a0e5d818e54b5955b329fd0d8fa39/assets/banner5.png
--------------------------------------------------------------------------------
/assets/dashboard-welcome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apollo-Level2-Web-Dev/batch-03-assignment-05/15cb28d2ac1a0e5d818e54b5955b329fd0d8fa39/assets/dashboard-welcome.png
--------------------------------------------------------------------------------
/assets/how-it-works-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apollo-Level2-Web-Dev/batch-03-assignment-05/15cb28d2ac1a0e5d818e54b5955b329fd0d8fa39/assets/how-it-works-2.jpg
--------------------------------------------------------------------------------
/assets/how-it-works-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apollo-Level2-Web-Dev/batch-03-assignment-05/15cb28d2ac1a0e5d818e54b5955b329fd0d8fa39/assets/how-it-works-page.png
--------------------------------------------------------------------------------
/assets/how_it_works_page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apollo-Level2-Web-Dev/batch-03-assignment-05/15cb28d2ac1a0e5d818e54b5955b329fd0d8fa39/assets/how_it_works_page.png
--------------------------------------------------------------------------------