irys13 / e-commerce-website

E-commerce website

e-commerce-website

E-commerce website

Since I have lost job it's time to work on my portfolio. I always wanted to have a website where I could sell my crafts so here it is, I am going to be my own customer and these are my requirements:

Make it in:

• Vue.js
• SCSS
• No jQuery or Bootstrap (I have used these frequently in past I want to fiddle with JS and I have came across few applications where I have been asked to not work with Bootstrap)
• No idea about backend because I don't really know much of backend, that's something to think about in the future

It should be:

• Responsive
• Cross browser compatibile
• With excellent UX/UI
• With accessibility in mind
• Web optimised- make it fast

Make it:

• Make it fast
• Make it cheaply
• Make it well

Diary:

Day 1 - 17 June 2020

Researched options, what should I use? Choice was between Anguar, React and Vue. Picked Vue due to it's simplicity and flexibility. Also from job search perspective, it's easy to transition to Angular or React if needed. Made a quick wireframe of the front page

Day 2 - 18 June 2020

Started the project abnd added SCSS to it. Made a rough long term plan and more detailed plan for the front page.

e-commerce-website's Issues

Custom Product Page

Allow customer to create a custom product:

• from what already is in the stock but different colours, set colours and custom colours
• Contact form if customer needs something else

Checkout

Save data to JSON file. Needs more info

User profile

Include saved addresses, order history, saved payment, wish list?

Product page

Just quick ideas, needs more thinkining about:

Product thumbnail, name, price, quantity, pre - order option, buy , view

sort by: price, name, popularity?

Products to load from JSON file

Contact me page

Include form and validation

Basket

Basket Page, save data to JSON file. Needs more thinking about + design

Front Page - Cross Browser Compatibile

Make sure it is cross browser compatibile with newest browsers and last 3 versions of the browsers.

Front Page

Create front page. It will need following components:

• Basic layout component
• Nav bar component
• Front page content component
• Footer component

Make it as basic static website for now

About Page

To be written...

Front Page - Animations and Enchancements

Add animations to the page:

• Product categories
• Basket dropdown

FAQ Page

Accordion with frequently asked questions

Product Page

To be written...

User registration and log in

Front end user log in and registration. Needs more thinking about + research

Front Page - Responsiveness

Make front page responsive with following breakpoints:

• 300px
• 540px
• 720px
• 960px
• 1140px

Front Page - Optimisation

Optimise the web page. Make sure it's fast and meets google SEO technical points