Aglecha Diamonds is a solo project focused on creating a diamond e-commerce website. The project includes various features like product listings, cart management, and a payment gateway integration using Razorpay in test mode. Additionally, the project implements sorting, filtering, debounce search, and Google Authentication for a seamless user experience.
You can go through the whole website deployed link is — https://aglecha-diamond-frontend.vercel.app/
The software and tools we've used to work on the project are:
- Frontend:- ReactJS, JSX, Redux, MaterialUI
- Backend:- NodeJs, ExpressJs, MongoDB, Mongoose
- Packages:- Bcrypt, UUID, JWT, Razorpay
- Tools:- Postman, VSCode, GitHub
- Mastercard
CardNumber: 5267 3181 8797 5449 CVV: Random CVV Expiry Date: Any future date
- Visa
CardNumber: 4111 1111 1111 1111 CVV: Random CVV Expiry Date: Any future date
1.Test payment success flow using
2.Test payment failure flow using
Implemented sorting functionality to allow users to sort product listings based on various criteria such as price, popularity, etc.
Added the ability for users to filter products based on specific attributes.
Implemented debounce search for efficient and real-time search functionality, reducing unnecessary API calls and providing a smoother user search experience.
Integrated Google Authentication to allow users to log in using their Google accounts, improving the authentication process and enhancing user security.
- Setup the project environment and defined the tech stack.
- Created a roadmap and defined tasks for each aspect of the project.
- Developed both backend and frontend components individually.
- Focused on backend development first, setting up routes, APIs, and integrating payment gateways.
- Integrated Razorpay payment gateway in test mode.
- Resolved challenges related to payment gateway documentation and implementation.
- Added sorting, filtering, debounce search, and Google Authentication to enhance user interaction and security.
- Tested the application thoroughly, including payment flows using provided test card details and UPI methods.
- Deployed the application and resolved platform-specific issues.
1. Google Authentication
- Issue with scopes and redirect URL during Google Authentication implementation.
2. Payment Integration
- Difficulty in establishing the connection and version compatibility during payment gateway integration.
3. Search Functionality
- Faced issues with debouncing search implementation while incorporating filtering functionality.
4. Redux Implementation
- Challenges in utilizing Redux to store and manage project data.
5. Deployment
- Faced various issues during the deployment process.
The Aglecha Diamonds project is a solo endeavor that successfully replicates a diamond e-commerce website, providing essential features like product listings, cart management, and a functional payment gateway using Razorpay in test mode. Additionally, the project includes sorting, filtering, debounce search, and Google Authentication to enhance user experience, engagement, and authentication security.
This summary provides an overview of the project, technologies used, payment testing methods, key implemented features, project structure, and the overall development flow.
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 your browser.
The page will reload when you make changes.
You may 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