MB2 - Vinyl Art E-com Website

Hyper Island - Individual Project

📂 The Brief:

• Create a fictional product generated by AI (MidJourney) that is sold on an e-comm platform.
• Develop a Frontend & Backend solution

⏳ Time spent / Deadline:

5 Week Project

🎯 Goals:

• Improve JS knowledge.
• Use web development workflows and build tools such as NVM, NPM.
• Sharpen skills with responsive design & mobile web development.
• Gain experience with various deployment platforms Vercel, Heroku.
• Experiment with techniques of animation on the web Framer-Motion.
• Be comfortable with Git, and Git workflows.
• Get familiar with Next.js and have the ability to learn/adapt to new technologies.
• Sharpen awareness of performance bottlenecks, cross-browser issues, Lighthouse & Chrome Dev Tools.
• Gain an understanding of common JavaScript design patterns.
• Fullstack experience, GraphQL, Auth0, Stripe and experience with headless CMS products Strapi.
• Develop with Typescript.
• Code using TDD.

🦾 Solution:

We wanted to optimise time spent on the Frontend, so we used Strapi as a headless CMS. We chose Next.js as our framework as we wanted to boost learnings in this area.

👨‍🎓 Learnings:

By in large we successfully hit most of our goals. If we were to redo the project, taking time to apply TDD and use Typescript would have been beneficial.

⁉️ Future Improvements & Current Bugs:

• Generate 3D renders of the product. This would have improved the professionalism of the e-comm store. However, we felt this was outside of the scope of the project and didn’t have 3D render skills within the team.
• Add a Dark/Light mode
• If we had more time tidying up the animation of the Hero Slider which switches between videos awkwardly.

💻 Tech used in this specific repository:

Frontend

• Next.js
• Auth0
• Stripe

Backend

• Strapi + Cloudinary
• GraphQL
• Insomnia

Deployment

• Vercel
• Heroku

Design

• Figma
• Styled Components
• Framer Motion
• Moment
• Hot Toast