Skip to content

Latest commit

 

History

History
46 lines (35 loc) · 2.74 KB

README.md

File metadata and controls

46 lines (35 loc) · 2.74 KB
Raw

LEGO HARRY POTTER MINIFIG

Description

This is a recruitment project that allows the drawing of three different minifigs using the Rebrickable API.

Technologies and libraries

  • React: The main library used for building the user interface.
  • Context: Used for managing the state of the application, including the state of the minifigs and the form.
  • React Router: Used for handling page routing.
  • React Hook Form: Used for handling forms in the application.
  • Tailwind CSS: Used for styling the application’s components.
  • Lottie: Used for displaying loading animations.

Description

The project unfolds across three views: 'Welcome,' 'Choose Minifig,' and 'Summary.' It presents three random Harry Potter minifigures for the user's selection. Once a choice is made, the user advances to the 'Summary' view, which features a form. Upon accurate completion of this form, users can confirm their order. Adjacent to the form is a concise summary and details of the selected minifigure. Finally, user details are transmitted to fake API.

  • Minifig Drawing: Users can draw three different minifigs. The drawing is initiated by pressing a button on the main page.
  • Minifig Selection: Users must select one of the three drawn minifigs before proceeding to the next step.
  • Minifig Saved: Choosed minifig is saved in LocalStorage to prevent data loss.
  • Minifig Details: Users can view additional information about the selected minifig.
  • Shipping Form: Users must fill out a shipping form before submitting the order. Each field in the form is validated.
  • Order Summary: Before submitting the order, users can view a summary of their order, with detailed parts.

Screenshots

image image image

Live Demo

Here is a link to the live version of your project.

Source Code

The source code of the project is available here.

Installation and Running

To run this project locally, follow these steps:

  1. Clone the repository: git clone https://github.com/tsmolarczyk/lego-coding-task.git
  2. Navigate to the project directory: cd lego-coding-task
  3. Install dependencies: npm install
  4. Run the project: npm run dev

The project should now be available at http://127.0.0.1:5173/.

Contact

If you have any questions or suggestions, feel free to reach out to me!