Demo: potato.yagogc.com
The stack choosed for this project is:
- JS Framework: React.
- CSS Preprocessor: Styled Components (CSS-in-JS library).
- Unit Test: Jest
- UI Snapshot Test: Jest Styled Components
- E2E Test: Cypress
- Linting & Formatting: Eslint + Prettier
The project was created with Create React App.
- The website should function as a one-page app ✔️
- Layout should match the provided wireframes ✔️
- Look and feel is up to you, flat colours for borders and background are all that's expected ✔️
- Supports the same set of browsers as Google Apps (supported browsers list) ✔️
- Site should use responsive techniques to ensure it works on a range of devices ✔️
- Must be built using HTML, CSS and JavaScript/TypeScript (SCSS or Less are encouraged) ✔️
- We encourage the use of AngularJS, Angular 2+ or React for your module/application ✔️
- Use any 3rd party libs you like (as long as they have a weak copyleft license) ✔️
- Search items e.g. a free-text search box where text entered is matched against tags ❌
- Infinite scrolling or "Load more" style pagination❌
- Google +1 button for results ❌
- Build process for generating production-ready code ✔️
- Tests (unit tests, e2e tests, etc) ✔️
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Launches the test runner in the interactive watch mode.
Launches the E2E test runner Cypress in the GUI.
Launches the E2E test runner Cypress in the CLI.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
After creation, your project should look like this:
potato/
README.md
node_modules/
package.json
yarn.lock
public/
index.html
favicon.ico
icon.png
manifest.json
images/
desktop/
src/
App.js
App.test.js
bg.svg
index.js
potato.svg
registerService.js
setupTest.js
components/
pages/
ui/
utils/
cypress/
.eslintrc
fixtures/
integration/
plugins/
support/
This project was tested with:
- Chrome (Version 64) ✔️
- Chrome for Android (Version 64) ✔️ (PWA Compliant)
- Firefox (Version 58) ✔️
- Edge 16 ✔️
- Safari 11 ✔️
- IOS Safari 11 ✔️
Besides the dependencies of React (via Create React App), this project uses the followings: