This is the source code for my final project in the Bootcamp: "Full-Stack Mastery: A Comprehensive Training on Web Development Frameworks" . Knots and Greens is a MERN stack-based e-commerce website that specializes in selling plants and macramé decorations.
- Make sure you have node and npm in your computer.
- Run npm install in both Backend/API/ and Frontend/knots-and-greens/ directories to install dependencies.
- Create an .env file in the Backend/API/ directory and create environment variables named "PORT" and "MONGODBCONSTRING".
- http://localhost:port/Admin for the Admin page (The customized navigation bar is for Admins are not yet developed).
The Full-Stack Mastery bootcamp provides a comprehensive introduction to Full Stack Web Development using the MERN stack (MongoDB, Express.js, React.js, Node.js). Throughout the course, participants gain hands-on experience and practical skills required to develop modern web applications. As the culmination of the bootcamp, we have built Knots and Greens as the final output.
By completing this bootcamp, you will achieve the following objectives:
- Understand the concepts of full-stack web development
- Acquire basic knowledge of HTML, CSS, and JavaScript
- Create Back-End services with Node.js and Express.js
- Integrate MongoDB as the database
- Develop Front-End applications using React
- Implement authentication in full-stack web applications
I extend my sincere gratitude to our instructor that made this bootcamp a success. Your dedication and passion for teaching web development is greatly appreciated. Thank you for making this journey possible and helping create Knots and Greens, MERN stack-based e-commerce website selling plants and macramé decorations.
The home page consists of three main sections: the hero section, carousel section, and featured-products section. The hero section is prominently displayed at the top and grabs users' attention with captivating visuals and a compelling message. The carousel section allows for dynamic content display, where users can view a series of customizable images or promotional banners. The featured-products section showcases a carefully selected collection of products that are highlighted as special or recommended. Users can easily navigate through these sections to explore various offerings and discover new items.
The store page serves as a comprehensive display of all the products available in the shop. It is divided into two parts to optimize the user's shopping experience. On the left side, users can easily search for specific products and conveniently add them to their shopping cart. The right side of the page contains the cart section, where users can review the contents of their cart, make changes such as adding or deleting items, and proceed to checkout when ready. This intuitive layout enables seamless product exploration and efficient management of the shopping process.
The admin page serves as a powerful tool for managing the shop's product inventory. It provides a comprehensive interface where administrators can view, add, delete, and edit all the products. Each product can be assigned tags that customize its appearance and determine its location within the website. For example, using the carousel or featured tags will place a product in the carousel or featured section on the homepage, respectively. Additionally, products can be labeled with the hot or sale tags, which visually indicate if they are on sale or considered best-sellers. The admin page empowers administrators to efficiently organize and curate the shop's offerings.
The login page provides a secure and user-friendly gateway for users to access their accounts. By entering their credentials, users can authenticate themselves and gain access to personalized features, order history, and other account-related information. The login page ensures the privacy and security of user data, offering a reliable foundation for a trusted user experience.
The signup page facilitates the process of creating a new user account. It provides a straightforward and intuitive interface for users to input their relevant information, such as name, email, and password. Passwords are encrypted with hash using bcrypt which provides more security to personal and sensitive information.
