The best way to solidify your learning is by actually taking the skills and knowledge you just acquired and apply it to a project. This proves to yourself and others that you actually absorbed the knowledge that you came to learn.
Any skills that you thought you understood from a course/book/content become sharper and you'll understand them in a deeper way when you put them to practice.
In addition to proving to yourself that you know a topic, it's important that you demonstrate your skills to others (and potential employers!). This way when you apply for your next job in Web Development you don't have to convince everyone you know a skill, you can show them.
With this in mind, we have prepared a project challenge for you below. There are two aspects to the challenge: the technical bits and communicating your expertise so others know you truly get it.
Project Brief
You work for a contracting business and have been paired up with a designer to build out a website for a hardware store.
The owner of the store needs to be more competitive with big hardware companies by making their online shopping experience as pleasant as possible.
Your task is to display hardware products for users to browse and purchase. You'll need to display all the products on a single page with key stats shown for each product. Additionally, the owner has requested that you be able to filter and sort these products.
You've been given the freedom to use what tech stack that you want. Your team has been building out products in Vue so that is what has been stubbed out for you with the data available to get started.
App Requirements
- Display all products on a page
- Product cards display key data
- Product list can be filtered
- Product list can be sorted
- Clearly distinguish out of stock products
{
"productName": String,
"manufacturer": String,
"productId": String,
"quantityInStock": Number,
"image": String,
"price": Number,
"category": String
}
Development Standards
In addition to building out the application, it's written in your contract that you keep a development log and document the decisions that you make for the owner and future contractors.
Write a technical blog post(s) on the key takeaways that you have for implementing features in this application. Each App Requirement can make a great post.
Steps To Get Started
This project aims to test the skills and understanding you've gained from The Beginner's Guide to Vue 3. If you are new to Vue or don't know where to start with the project, watch the course and come back here after to get started on the project.
When you're ready to go, you can fork the project challenge GitHub repository or get started right now in CodeSandbox.
Stretch Goal
If implementing the app requirements above wasn't enough, take this application a step further by adding routing to individual product pages.
Design
You've been paired up with a designer who has given you wire frames for your first iteration on the application. Reference them as you build out the application if you aren't sure how to make the page look.
The page layout has a header for the store information and shopping cart with filters for searching products on the left and product cards listed on the majority of the remaining screen
The product card should display all of the data provided from the mock API that is being used.
A configuration like you see on the right works well but feel free to implement your own design if you’re up for the challenge.
Submission
Did you complete the Portfolio Project Challenge? Let us know what you built!
Tweet @eggheadio