MentorMatch - Mentor Hiring Site

Welcome to MentorMatch, a dynamic and user-friendly web application designed to connect individuals with expert mentors across various fields. This project showcases my frontend development skills, utilizing modern technologies and best practices to create an engaging user experience.

Table of Contents

• Features
• Technologies Used
• Getting Started
• Project Structure
• Key Features
• Figma Design
• Local Development
• Conclusion

Features

• User-Friendly Interface: A clean and intuitive design that enhances user experience.
• Dynamic Routing: Seamless navigation between different pages using React Router.
• Reusable Components: Modular components that promote code reusability and maintainability.
• State Management: Efficient state management using React hooks like useState and useEffect.
• Local Storage Integration: Persistent storage of user bookings using the browser's local storage.
• Responsive Design: A mobile-first approach ensuring accessibility across devices.

Technologies Used

• React: A JavaScript library for building user interfaces.
• TypeScript: For type safety and improved developer experience.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Date-fns: A modern JavaScript date utility library for date manipulation.
• React Router: For handling routing and navigation within the application.

Getting Started

To get a local copy up and running, follow these simple steps:

1. Clone the repository:

   git clone https://github.com/GauravOOO2/MentorMatch-Mentor-Hiring-site.git

2. Navigate to the project directory:

   cd MentorMatch-Mentor-Hiring-site

3. Install dependencies:

   npm install

4. Run the application:

   npm start

   Open your browser and navigate to http://localhost:3000 to see the application in action.

Project Structure

The project is organized into several key directories:

• src: Contains all the source code for the application.
  • components: Reusable components like Header, MentorCard, BookingForm, etc.
  • pages: Different pages of the application such as HomePage, MentorProfilePage, BookingPage, etc.
  • data: Contains mock data for mentors.
  • types: TypeScript interfaces for type safety.
• public: Static files and the main HTML file.

Key Features

• Dynamic Mentor Profiles: Users can view detailed profiles of mentors, including their skills, services, and availability.
• Booking System: Users can select a date and time slot to book a session with their chosen mentor.
• Confirmation Page: After booking, users receive a confirmation with all the details of their session.
• Booked Mentors Page: Users can view and manage their booked sessions, with the option to withdraw bookings.

Figma Design

Check out the design for MentorMatch on Figma: Figma Design

Local Development

This project is built with a focus on clean code and best practices. Here are some highlights:

• React Hooks: Utilized useState for managing component state and useEffect for side effects, such as fetching data and updating the local storage.
• Local Storage: Implemented to store user bookings, ensuring data persistence across sessions.
• Reusable Components: Each component is designed to be reusable, promoting a DRY (Don't Repeat Yourself) codebase.
• Responsive Design: Tailwind CSS is used to create a responsive layout that adapts to different screen sizes.

Conclusion

MentorMatch is a testament to my frontend development skills, showcasing my ability to create a functional, aesthetically pleasing, and user-friendly application. I am passionate about building applications that not only meet user needs but also provide an enjoyable experience.

Feel free to explore the project and provide feedback. I look forward to any opportunities to further enhance my skills and contribute to exciting projects!

---

Thank you for considering my work! If you have any questions or would like to discuss potential collaborations, please feel free to reach out.

GitHub Repository