An ecommerce React application utilizing cutting edge technologies in: augmented reality, 3D rendering, database managment and so much more.
When first loading the URL for Augmented Retail, you are taken to a landing page with the logo, a site title and a navigation bar. The navigation bar has options to Login, Sign Up, or to view a list of current products. You can also see a cart icon which will keep track of any products you wish to purchase. Below are images for the landing page, sign up, and login.
Once you sign up, or login, you will see the navbar change to a different set of options. Now you can still view all the products, but you can also view your order history, or logout.
In the all of the products view, you will see a title of the product, an image of the product, the price of a product, and the ability to add a product to your cart. You can also choose to view the products by a specific category, and in the example below, we view the products by the sunglasses category. If you click on a product image, or title you are taken to that products details page.
Once in the product details page, you gain access to write a review of a product, and see all posted reviews from other users as well. A description is available under the product image. You can add the product to your cart, and also remove it, should you change your mind. You can also access the QR code which takes you to a augmented reality view of the chosen product. Then a Hiro image which will allow you to see the image from your phone or webcam.
After deciding that you would like to purchase a product (or several products) simply click on the cart icon while logged in, and you can proceed to checkout through Stripe. Then after checking out, you are taken back to the view all products page. The navigation bar also gives you access to any past orders you have placed as well, in the link "Order History".
- React.js
- MongoDB
- Mongoose.js
- Apollo
- GraphQL
- Material UI
- Node.js
- React Web AR
- A Frame
- Three.js
- Stripe
- Currently the reviews for product can only be deleted in testing, would like to delete in UI as well.
- Currently the reviews for product do not auto-update when a new review is added.
- Create an administration user who can create/read/update/delete/ products, and users.
- Create 3D models for the specific products, instead of the globe rendering.
- Create a streamline mobile application with AR mapping software, so that QR and Hiro are unneccessary.
- What would you like to add to the application?
John Patrick Banas
Ben Sottek
Joshua Alexander Cross
Casey Arrington
Kevin Dallas Yatsinko
None of this would be possible without the love and support of my wife Sam and our dog Teddy. Thank you to my nephew Mitchell for letting me help him with his homework, and through that, discover my love of computer science. The wonderful folks at the Vanderbilt Owen School of Engineering Bootcamp. All the Instructors, TA's, Graders, Tutors, and Admin team who made my journey possible. Also to all the coders out there who teach me something new everyday, through Slack, StackOverflow, GitHub, Dev, Codecademy, Coursera, CodeNewbie, Udemy, Dataquest, and too many others to name here. I am grateful for the knowledge freely given, and I will freely give knowledge in return. Thank you most of all, to YOU for reading this far! 👏 🤣
If you would like to contribute, have any commentary, corrections, or suggestions, please feel free to contact us through our emails provided in the Authors section. If you like the project, we would appreciate giving a ⭐ in support.