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:

• Develop knowledge of JS
• Experience with web development workflows and build tools NVM, NPM
• Experience with responsive design & mobile web development
• Experience with various deployment platforms Vercel, Heroku
• Experiment with techniques of animation on the web Framer-Motion
• Being comfortable with Git, and Git workflows
• Familiar with modern JS frameworks Next.js and have the ability to learn/adapt to new technologies.
• Awareness of performance bottlenecks and cross-browser issues Lighthouse & Chrome Dev Tools
• An understanding of common JavaScript design patterns
• Fullstack experience, GraphQL, Auth0, Stripe and experience with headless CMS products Strapi.
• Develop with Typescript
• Use 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