Job Task - MERN Stack Web Application Development

Job Description:

We are seeking a talented MERN stack developer to create a user-friendly web application that allows general users to book college services and facilities. As the developer, you will be responsible for building the entire web application using your expertise in React.js, Node.js, MongoDB, and Express. Your creativity and design skills will play a crucial role in crafting an appealing user interface and enhancing user experience.

Task Details:

• Build a web application that enables college booking facilities. You are encouraged to use your own design to create a visually appealing and functional platform.

• Implement a navigation bar with relevant options such as 'Home', 'Colleges', 'Admission', and 'My College' sections to provide easy navigation for users.

• Design the home page with three distinct sections (excluding the header and footer):

  • A search field under the navbar that allows users to search for college names. Upon searching, relevant college cards will be displayed.
  • A section containing three college cards featuring college images, names, admission dates, events, research history, and sports information.
  • Each college card will have a "Details" button. When clicked, users will be redirected to a different route showing detailed college information, including images, admission process, events, research works, and sports categories.

• Create a section on the home page for a college image gallery, showcasing different college graduate group pictures.

• Include a section recommending research paper links researched by college students.

• Develop a review section where users can view feedback and reviews about specific colleges.

Routes:

• "College" route: Users can access this route to see a minimum of 5 or 6 college cards, each displaying college image, name, rating, admission date, research count, and a "Details" button. Clicking the "Details" button will reveal additional information about events and sports facilities of that college.

• "Admission" route: Display college names, and upon selecting a college, users will be presented with input fields for candidate details, including Candidate Name, Subject, Candidate Email, Candidate Phone number, address, date of birth, and an image field. After submitting the form, the data will be visible on the "My College" route.

• "My College" route: Once logged in, users can view their college details and add reviews. The review input field will include a rating option. Added reviews will be displayed in the home page reviews section.

Authentication:

• Implement registration and login processes using email/password, Google authentication, and social media accounts.

• Include password reset functionality to ensure account security.

• Restrict access to college details and review features before user login.

• Display the user's profile name after login.

• Create a 404 route with a creative look for handling page not found scenarios.

Profile Route:

• Clicking the 'Profile Name' will lead users to the profile route where they can view their personal details.

• Add an "Edit" button in the profile route, enabling users to edit their Name, email, university, and address. Updated data will be saved upon clicking the 'Save' button.

Responsiveness and Deployment:

• Ensure the web application is fully responsive and functions flawlessly across various devices, including desktops, tablets, and mobile phones.

• Utilize a CSS library for styling purposes, and you may consider using Tailwind CSS for its recommended usage.

• Deploy the web application using platforms like Netlify, Vercel, or Firebase.

Optional Features:

• If you have additional ideas to make the website more eye-catching or enhance user experience, feel free to implement those features.