Experience Exchange aims to bring people together over shared hobbies, skills, and experiences. Users can create a custom profile and connect virtually or with locals in their area to learn something new and form connections through skill sharing.
This capstone project is a collaborative effort between front-end and back-end students and fulfills the requirements for graduation from Turing School of Software and Design. For more details, visit the Capstone Project page.
- Profile Creation: Users can create a custom profile.
- Skill Management: Users can add and remove skills directly from their dashboard profiles, showcasing their evolving expertise.
- Search By Skill: A comprehensive search feature enables users to find like-minded peers based on skills.
- Auto-Suggest Search: Dropdown search suggestions offer relevant search queries to assist users in finding similar profiles.
- Availability Filter: Users can filter search results by remote availability and view results by proximity.
- Meeting Requests: Once a potential match is found, users can submit meeting requests, providing an avenue for meaningful connections.
- Approval/Decline: Meeting requests can be approved, adding the meeting to both users' schedules, or declined, removing the request.
- Dark Mode: To enhance the user experience, light and dark mode can be toggled in the navigation.
- Implementing TypeScript: Successfully employed TypeScript to enhance the codebase's maintainability and readability, contributing to a more reliable code base.
- Collaborative Backend Integration: Worked seamlessly with the backend team to tailor a JSON contract that effectively met the requirements of both parties, ensuring a unified and standardized communication protocol.
- Dynamic Component Rendering: Implemented dynamic rendering strategies within components, fostering reusability across multiple views and enhancing the scalability of the application architecture.
- Autosuggest Library Not Maintained We implemented a popular 3rd party react autosuggest library. Some of the errors we encountered were related to legacy class-based components. This could have been avoided by reading the documentation fully before implementing it, as the creator did update the README to share that it's no longer maintained.
- Transitioning from CSS to Tailwind - We enjoyed the freedom of blending CSS with inline tailwindcss styling after choosing to install the CSS framework midway through the project to learn new tech and enable the use of daisyUI’s component library. However, it did require managing redundant CSS variables.
- Asynchronous JavaScript Handling: Overcame complexities associated with asynchronous JavaScript, particularly in scenarios where data was undefined, by implementing robust error handling mechanisms to ensure application stability.
- Clone down this repository:
https://github.com/.....
cdintoexperience-exchangedirectory and run:
npm install
npm start
- Enter the following url in your browser: http://localhost:3000/