When a User visits the home page they can click a link to log in or register and also can browse the product listings. I used the Etsy API to fetch products for the app. A User can search the trending, interesting, or all active Etsy listings. When the User is browsing the Etsy listings if the are not logged in and click “Add To Cart” the window will alert the User to log in and the app will redirect to the log in page. Once logged in, the User’s cart will appear in the top right corner of the screen. The cart will list the number of items currently in the cart and the total value of the items. As you add items to the cart it will update the total and number of items instantly. The cart also displays a link to view the items in the cart. When viewing the cart, the User can update the quantity of a specific item or remove an item from the cart. Again, the cart will update instantly. The User can purchase the items by clicking the “purchase” button. The cart total will reset to 0 and the cart items will be emptied.
These are upgrades that I am planning on implementing:
- React Stripe for payments
- Order and Order Item history
- Administrative features like stats that track most sold items, most removed items from cart
- Upgrade search parameters for listings
- Display a Users recently viewed items, and associated items that other customers purchased
- OAuth
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
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.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify