Shopnik

Tech Stack:

1. Nextjs as the React framework
2. Styled components for styling solution
3. Firebase for Database and authentication
4. Dicebear for generating user avatars
5. Algolia for searching products
6. Stripe for processing payments
7. EmailJS for contact form submission

Features:

1. Sign up for an account with email and password or google account
2. Every user gets a random avatar image upon account creation
3. Log in to account
4. Reset password via email
5. Search for any product
6. Add product to cart
7. Increase/decrease cart products quantity
8. Remove products from cart
9. Zoom in effect upon hovering product image (like amazon)
10. Purchase a single product
11. Purchase all the products in cart
12. Review products after purchase
13. See total review count of a product
14. See the average rating of a product
15. See all the reviews posted by users of a product
16. Ask a question about a product
17. See all the questions about a product
18. Reply to reviews and questions as admin
19. Contact store support

Pages:

1. Home
2. Shop
3. Category
4. Product
5. Sign up
6. Log in
7. Forgot
8. Account
9. Contact
10. 404

How the app works:

Authentication: The application is statically rendered except for the account page. Upon clicking on the sign-up button, we authenticate the user and generate a random SVG avatar image based on the uid. Then we upload the image to firebase storage and keep the reference to the file. Then we save the user's name, email, and image to the database. Potential errors are handled with a notification component.

Product search: Product search is implemented using Algolia's full-text search. The product data is stored in an index in Algolia. When the input changes we make requests to Algolia for hits and display them in the front-end. The process is blazing fast!

Checkouts: All the products are stored both in Firestore and Stripe for processing payments. When a user clicks the checkout button, we make a request to the backend for a checkout session, passing along the line_items. Once we get back the session link from the server, we redirect the user to the checkout page. On success, the user is redirected to the home page and clear the cart. Then Stripe hits our backend webhooks route with the checkout session details.

Saving products to be reviewed: Our backend webhooks route listens for the "checkout.session.completed" event. Once the event object is successfully constructed, we get the user's details from the database using the email. Then we get all the line_items of the session and for each line item, we save the item to users toBeReviewed collection. Then we fetch the collection when the app loads and display them on the account page.

Reviewing a product: Reviews can be made only after purchase. The user can see a list of products to be reviewed if they have purchased any products. Upon clicking on the review button, a form and a star picker show up for getting the user's opinion. When the form is submitted, we save the review with the appropriate data for that specific product's reviews collection.

Asking questions: Only authenticated users can ask questions about a product. Upon submission of the form, we save the question with the appropriate data for that specific product's questions collection.

Contacting support: Contact form submission is handled with EmailJS. Strong form validation is implemented with React Hook Form. Once a user submits the form, we get the form details in our email, and an auto-reply is sent to the user.

Conclusion: This application is really complex and was really fun and challenging to build. I've learned some new technologies like Firebase and Algolia. I really deep-dived into Cloud Firestore. I totally loved the challenging part. Finally, I like learning new stuff and heading into the unknown.