Skip to content

Latest commit

 

History

History
85 lines (61 loc) · 4.37 KB

README.md

File metadata and controls

85 lines (61 loc) · 4.37 KB
Raw
Unmatched Logo

Unmatched is a website dedicated to fostering confidence, motivation, and success in the next generation of STEM leaders. Created for underrepresented STEM students, Unmatched helps them see themselves in the success stories of STEM professionals across diverse genders, races, and abilities.

🌐 View Live Site

Tech Stack & Tools

Primary

Miscellaneous

Cross-Functional Team

Developers:

Archaa, Halimat, & Sherry

Designers:

Autumn & Kayla

Product Manager:

Miriam

Getting Started

  1. Clone the repository: 
    git clone https://github.com/cherryontech/unmatched.git
  2. Navigate to the project directory: 
    cd unmatched
  3. Install the dependencies: 
    npm install
  4. Start the Tailwind build: 
    npm run tailwind
  5. Start the development server: 
    npm run dev

Features

  • Dynamic Data Rendering: Utilizes React's state management and the useState hook to dynamically render the bios of STEM professionals, allowing for interactive and responsive user experiences.

  • Search Functionality: A custom search feature is implemented in the ProfessionalsPage which filters the displayed professional cards in real time, enhancing the usability and accessibility of the application.

  • Routing System: Leverages React Router for navigation between different views of the app, such as the home page, professionals list, and individual bio pages, creating a seamless and intuitive user flow.

  • Responsive Design: Styled with TailwindCSS for a responsive layout, ensuring a consistent and accessible user experience across various device sizes.

  • Optimized Performance: The application is structured with a focus on performance, including efficient state management and the use of React's useRef hook to avoid unnecessary re-renders.

  • Accessibility Focus: Implements best practices for web accessibility to ensure that the application is usable by as wide an audience as possible, including those with disabilities.

  • Interactive UI Components: Features interactive components such as cards and modals, which are implemented with reusable React components, allowing for a maintainable and scalable codebase.

Contribution

To contribute to this project, please follow these steps

License

This project is licensed under the Hippocratic License.