This full-stack e-commerce web app combines Handlebars and SCSS to generate the front end and style it. The back end is powered by NodeJs and Express, using Mongoose to communicate with and perform CRUD operations on the user and products in the MongoDB database. The site uses custom middleware to limit the actions of users without an account, while offering greater functionality to those who do sign up for an account.
This group project was inspired by one of our group members who recently purchased a bonsai tree, offering an aesthetically pleasing online alternative to products which are normally bought in person.
Once the [GitHub repository] (https://github.com/felixrueckl/bonsai-shop.git) has been forked, you will need to use the commands 'npm init', then 'npm run dev' to ensure the dependencies are running. You will also need to connect to the MongoDB database. This requires permission from one of the creators of the project. The app has been deployed using fly.io and is available [here] (placeholder).
Ensure that Node.js and MongoDB are installed on your machine. Clone the repository: git clone Navigate to the project directory: cd bonsai-shop Install the dependencies: npm install Set up the MongoDB connection by configuring the database URL in config/database.js. Start the application: npm start Access the application in your web browser at http://localhost:3000. Contribution We welcome contributions to the Bonsai Shop application. If you would like to contribute, please follow these steps:
Fork the repository. Create a new branch: git checkout -b my-new-feature Make your changes and test thoroughly. Commit your changes: git commit -am 'Add some feature' Push the branch to your fork: git push origin my-new-feature Submit a pull request detailing your changes. License The Bonsai Shop application is licensed under the MIT License. Feel free to use, modify, and distribute the application as per the terms of this license.
The Bonsai Shop application offers the following features:
User authentication: Users can create an account, log in, and manage their profile. Product catalog: Display a collection of bonsai plants available for sale. Product details: Users can view detailed information about each bonsai plant, including images, descriptions, and prices. Shopping cart: Users can add bonsai plants to their shopping cart and proceed to checkout. Order management: Users can view and manage their orders, including order history and tracking. Admin dashboard: Admin users have access to additional features like managing products, categories, and user accounts. Technologies Used The Bonsai Shop application is built on the following technologies:
Node.js: A JavaScript runtime environment that allows executing JavaScript code outside of a web browser. Express.js: A web application framework for Node.js that simplifies the development of web applications. Handlebars: A popular templating engine that allows creating reusable HTML templates. MongoDB: A NoSQL document database used for storing and managing application data. Midjourny AI: A technology used for generating images and sample texts to enhance the application's visual appeal and content. SCSS: A preprocessor scripting language that is compiled into CSS, providing more advanced features and organization for styling the application. Installation To run the Bonsai Shop application locally, follow these steps:
In the following section, you will see a rundown of each page and what the elements on the page do.
The home page contains the logo, an image of a juniper bonsai as well as a short introduction to the shop. There is a nav bar linking to:
- The Shop
- The About Page
- The Sign Up Page
- The Login Page
- The Shopping Cart
- The User Profile
It is worth noting that the user profile and shopping cart pages are not accessible unless the user has created an account and is logged in. There is a custom middleware enabled that means upon clicking on these icons, the user will be automatically redirected to the login page.
The shop page contains 12 different products, with an image, their name, and their price. Clicking on each uses a dynamic route to take you to that particular product's page. This contains its name, an image, a description as well as an 'Add to Cart' button. Users who are not logged in will be redirected to the login page if they try to add a product to the cart. If a user is signed in, the product will be added to the cart, and a message will appear informing them of this. There is also a 'Back to shop' button, taking the user back to the shop page. All images on the shop and product pages are AI-generated.
The about page contains info on the team that made the site, including some quite frankly disturbing AI-generated images of us and some silly introduction paragraphs. There is also an embedded map of where to find the fake company, and how to get there.
Both pages contain forms with input options. The sign up page prompts the user to create a username, email, and password. When the user inputs incorrect information in to any of the fields on either of these pages, one of a few error messages appears:
When the user successfully inputs the required information on either page, they are redirected to their profile page.
The profile page contains the username, a button to take the user to the shopping cart, a logout button, and a change settings link. The logout button ends the current session and redirects the logged out user to the login page, the change settings button leads the user to the edit profile page.
On this page, the user can change either the username or email address, or both. They can also delete their account, which will remove their data from the database, and redirects the user to the home page.
The shopping cart displays the items the user has added, a running price total, and a button to remove the item from the basket. It also contains a checkout button. However, this does not lead anywhere as the products cannot be bought and there is no dummy payment page.
The additional features and improvements to the site are as follows:
- Plugging in the Stripe API to create a dummy payment page
- A favorites button for users to add items to their account for later
- A quantity feature for the shopping basket
- The ability for users to change their password
Andrew Cockroft, Felix Rückl, Alexander Ley