This is an e-commerce application that incorporates various features such as user authentication, product management, shopping cart functionality, and more...
The application was built using the following tech stack:
- Angular: Angular was used for the frontend development, providing a powerful framework for building robust and scalable web applications.
- CSS: CSS was used for styling and designing the user interfaces, ensuring visually appealing and responsive layouts.
- JSON-Server: JSON-Server was utilized for backend simulation, enabling the application to interact with a mock API and handle data management.
- Developed in 4 days
- Solely created by me
You can access this application through the following live link : https://angualecom.com
Recorded demo video : Demo Video
- Email : [email protected]
- Password : admin123
To run this application locally, follow these steps:
- Clone or download the code repository.
- Open the folder in your preferred terminal or code editor, such as VS Code.
- Install the required npm packages by running the command
npm install. - Start the project by running the command
ng serve.- Once the server is up and running, you can access the application locally at this URL: http://localhost:4200/.
- Open the provided URL in any web browser to view and interact with the application.
By following these steps, you can easily set up and run the e-commerce application locally on your machine.
- Home page
- Search page
- Product details
- Sign up and login page
- Cart page
- Checkout page
- Seller Home
- Add product
- Edit product
- Not found page
- User registration and authentication
- Form validation
- Email existence check during registration to prevent duplicate registrations
- Separate pages for sellers and regular users
- Protected routes for seller access
- Seller privileges to add, delete, and edit products
- Search feature
- Product retrieval
- Shopping cart functionality, including:
- Add to cart
- Remove from cart
- Checkout and empty cart items
- Restriction on login and sign-up pages if already logged in
- Protected route when not logged in
- Displaying a 404 page when encountering unavailable pages or URLs
-
👉 Project Setup:
- Created a new Angular project using the command
ng new e-commerce. - The command
ng newis used to generate a new Angular project, ande-commercerepresents the project name.
- Created a new Angular project using the command
-
👉 Custom Component Creation:
- Created a custom component named "header" using the command
ng g c header. - The command
ng g cis used to generate a new component, andheaderis the name of the component.
- Created a custom component named "header" using the command
-
👉 Routing and Binding: Implemented routing functionality to navigate between different pages within the application.
-
👉 Signup Form: Developed a visually appealing signup form with an intuitive user interface.
-
👉 JSON Server Setup: Set up a JSON server to mock the backend API and facilitate data management.
-
👉 Service Creation:
- Created a service named
"seller"using the commandng g service services/seller. - The command
ng g servicegenerates a new service, andservices/sellerspecifies the path and name of the service.
- Created a service named
-
👉 Auth Guard (Protect Route): Implemented an authentication guard to protect certain routes from unauthorized access.
-
👉 Dynamic Navbar: Developed a visually attractive and responsive navbar that changes based on the user's authentication status.
-
👉 Logout Feature: Implemented a logout feature with a smooth transition and visually appealing feedback.
-
👉 Product Addition for Sellers: Created a visually appealing component named
"seller-add-product"to enablesellersto add new products to the platform. -
👉 Product List for Sellers: Implemented a visually appealing product list view for sellers, allowing them to easily manage their products.
-
👉 Product Deletion and Update for seller: Developed visually appealing and user-friendly options for deleting and updating product information.
-
👉 Carousel: Implemented a visually attractive carousel component for showcasing featured products or promotions.
-
👉 Trendy Products and Component Usage: Created a visually appealing component named
"productCard"to display trendy products and reused it throughout the application, providing a consistent and visually appealing design. -
👉 Auto Suggestion in Search: Implemented an auto-suggestion feature with a visually pleasing dropdown menu that provides search suggestions as the user types.
-
👉 Search Results Display: Developed a visually appealing search results page that presents search queries in an organized and user-friendly manner.
-
👉 Product Details: Implemented a visually attractive product details page with clear and appealing product information display.
-
👉 Add to Cart (Local Storage): Developed a visually appealing and intuitive shopping cart feature using local storage to store added products.
-
👉 Add to Cart (When Logged In): Implemented a visually appealing add to cart functionality when the user is logged in, with clear feedback and smooth transitions.
-
👉 Push Local Cart to Database (When Logged In): Developed a visually pleasing synchronization mechanism to push the local shopping cart to the database when the user is logged in, ensuring a seamless experience.
-
👉 Shared Service: Created a shared service with a visually appealing and user-friendly design to facilitate data sharing between components.
-
👉 Checkout: Show total price and once ordered empty cart items
-
👉 404 Page: The visually appealing 404 page provides clear messages, suggestions, and navigation options for a user-friendly experience when encountering unavailable pages or URLs.
Throughout the development of this e-commerce application, several challenges were encountered, leading to valuable learning outcomes. Some notable challenges and learnings include:
⏰ Time Constraint : Completing the project within a limited timeframe required efficient planning, prioritization, and focused development.
📊 Data Management : Managing complex data relationships and ensuring data consistency throughout the application demanded thoughtful design and meticulous handling.
🔒 Authentication and Authorization : Implementing secure user authentication and authorization mechanisms to protect sensitive user information necessitated thorough understanding and implementation of industry best practices.
💻 Responsive Design : Designing and implementing responsive and visually appealing user interfaces that work seamlessly across different devices and screen sizes demanded attention to detail and thorough testing.
Through the development of this project, we learned several valuable lessons, including:
📝 Thorough Planning : The significance of thorough planning and requirements gathering before starting the development process to minimize roadblocks and ensure smoother execution.
🧹 Code Maintainability : The value of writing clean and maintainable code for long-term project scalability and easier collaboration.
🔍 Rigorous Testing : The importance of rigorous testing and debugging to identify and fix issues promptly, ensuring a robust and reliable application.
📖 Continuous Learning : The benefits of continuously learning and staying updated with the latest technologies and best practices in the industry to enhance skills and deliver higher-quality solutions.
By overcoming these challenges and learning from them, I was able to successfully deliver user-friendly e-commerce application built with Angular.
If you have any further inquiries or need additional information, please feel free to contact me via email or phone:
- ✉️ Email: [email protected]
- ☎️ Phone: +91 6002565574