SHAUPY E-COMMERCE DEMO WEB APP

Live Demo

What is this Demo

• This web app was created by Tan Eu Zin using the Material UI Library
• Developed specifically for the KE Web Front-End Workshop Dec 21
• Developed only for Mobile
• Developed based on Figma Mock Up done by Andrea covered in UI/UX Workshop

How to use this Demo

• Used as a reference as you code-along with the workshop
• Copy code from this repo so you can focus attention on the content rather than the implementation of the workshop
• Used to understand implementations not covered in the workshop

How to run it

1. Clone the Repository
2. cd to the local directory the repo is in
3. run npm install
4. run npm start
5. A browser window will open to localhost:3000
6. Using the developer tools, open the

SHAUPY Web App

The Web App consists of 3 parts: Login, Browse and Product

Login

A simple Login page to showcase the following Material UI Components/Concepts

• Typography
• TextField
• Button
• makeStyles
• Material UI Icons

Browse

A page for 'users' to browse products. Showcases:

• createTheme, ThemeProvider
• overflowX: scroll
• Link from react-router-dom

Product

A page focusing on a specific product, entered from clicking on a product in Browse. Showcases:

• backgroundImage on divs
• overflowY: scroll

Feel free to contact me on telegram @taneuzin for any questions.