Vue-hobby-lab

This is a tool to have some basic authentication using firebase auth and using Rebrickable API to get information about LEGO sets.

The website is hosted here: https://vuehobbylab.surge.sh/

Objectives

• Using firebase/auth for basic authentication
  • Login / Logout / Register
• Using Brickable API to retrieve info about LEGO sets
• Store lego sets per user logged in
  • Wishlist
  • Owned
• Have Sass installed
• Use Bulma for Styling (with Sass)
• Types definition
• Components/Pages
  • Navbar
  • Background for Login and Register
  • Login Page
  • Register Page
  • Dashboard Page
    • Greeting component for not logged in
    • Dashboard for logged in
  • Lego Pagination
    • Set page size
      • Apply changes on set page size
    • Pagination
      • Show next and Previous
    • Set table
      • Set details
      • Link to Lego Detail
  • Lego Detail
    • Add to wishlist
    • Add to "Added"
    • Details of Lego
  • Owned Page
  • Wishlist Page

Things to be fixed

• Logo Sizing in Navbar
• Background image not repeating horizontally
• Set table out of bounds in mobile

Nice to have

• Lego Pagination
  • Search Box
  • Set page size
    • Update Page Params
    • Apply changes on set page size
• Pagination
  • Show page numbers

Firebase and Rebrickable Configurations

For the tool to run you need to get the API keys for firebase and rebrickable, you can check the file .env.example to see what are the values needed to run the application.

Don't forget that you need to create a ".env" file in the root of the project!

How to Compile and Hot-Reload for Development

npm run dev