A blueprint for the layout of an e-commerce website.
| Technology | Description |
|---|---|
| React | JavaScript library for building user interfaces |
| TypeScript | Primary language for programming |
| Vite | Build tool |
| Vitest/Jest DOM | Unit testing |
| Tailwind CSS | CSS framework for styling |
| Frame motion | Animation |
| Vercel | Live web deployment |
Pre-requisites:
To run the application locally, follow these steps:
- Download the zip file and open the project in VS code or clone the repository via terminal:
git clone https://github.com/basinghse/ecommify.git - Navigate from the root folder to the web folder:
cd web - Install dependencies:
npm install - Run the application:
npm run dev - Navigate to the URL i.e.
http://localhost:5173/ - (Optional) Run unit tests:
npm run test
Explain why the result of ('b' + 'a' + + 'a' + 'a').toLowerCase() is banana.
- When you add two strings, they combine. The first operation 'b' + 'a' becomes
ba. - The middle operation has two + symbols. The first one is treated as a plus, so the second becomes an unary operator trying to convert the next character to a number
- 'a' can't be converted to a number, so it becomes NaN (Not a Number)
- 'ba' + (+a) becomes
baNaN - Adding the final 'a' we get 'baNaNa', which is converted to lowercase to give a final result of
banana
BEM and SASS SASS parent selectors Responsive design
- Stylistic choices for alignment of section data to the left or centre, currently centred.
- Slight repetition in Hero, however it is a small component. Consider refactoring if it gets larger.
- The nav bar could be improved to include a transparent darker background
- Expandable cards/redirections from users clicking on read more
- A home page displaying a demo of both pages (exercises) before viewing a single page
- A footer with social media links/copyright
- Establish eslint rules
- More extensive unit testing
- Skeleton loading: when using more complex data i.e. fetching from an API this would improve user experience while the data is loaded
- Creation of more common constants, themes for sharing
- Introducing a logger service such as Winston to receive errors
- Introduce a snackbar for user feedback - ideally for errors and especially when adding more complex interactions such as form submissions