Star Wars Finder

A comprehensive search API designed to explore and discover various resources from the Star Wars universe. Utilizing the power of SWAPI, you can now delve into the intricate details of people, films, starships, vehicles, species, and planets.

screen-capture.1.webm

Table of Contents

1. Setup

• Running the Project Locally
• Running Storybook
• Testing
  • Running Tests
  • Coverage Reports

2. Technical Highlights

Setup

1. Ensure you have yarn installed. If not, you can get it here.

2. Clone the repository to your local machine.

3. Navigate to the project directory.

4. For the v1 version, install the project dependencies using the following command:

   yarn install
   

Running the Project Locally

After setting up, you can run the project on your local machine using the following command:

yarn dev

Running Storybook

yarn storybook

Testing

Running Tests

To run the tests, use the following command:

yarn test

Coverage Reports

If you wish to view the test coverage, use:

yarn test:c

---

Technical Highlights 💡

• ⚛️ Atomic Design: I've structured the components based on the principles of Atomic Design, ensuring modularity and reusability.

• 🎨 SASS: For improved performance and easier maintenance, i've employed SASS for styling.

• 📖 Storybook: Every component is attached with its respective Storybook, allowing for easier visualization and testing.

• 📁 Library (lib) Folder: A dedicated lib folder has been established to perform dependency inversion, particularly for the React Query and Axios libraries.

• ⚙️ Redux:

  • 🔗 Dependency Inversion: Both dispatch and get actions in Redux slices are consumed through an intermediary hook, ensuring flexibility and maintainability.
  • 💾 Redux Persist: Integration with Redux Persist to maintain the state even after page refreshes.

Testing 🧪

• 📊 Coverage: Over 90% of the codebase is covered by tests, ensuring reliability and stability across the platform.

Project Setup 🔧

• 🚫 ESLint: The project is already set up with ESLint, ensuring consistent code quality and adhering to best practices.

Design and Usability 📱

• 📴 Responsiveness: The application is fully responsive, providing an optimized experience across various devices.

• ♿ Accessibility: Committed to inclusive design, special attention has been given to ensure the platform is accessible to all users, regardless of their abilities.

Thank you for exploring the Star Wars Finder. May the Force be with you in your search endeavors!