The fresh|Vintage website operates as an eco-conscious platform, dedicated to promoting sustainability by reusing and reducing the consumption of vintage clothing, furniture, and accessories. The core mission is to offer timeless pieces that are both stylish and budget-friendly. The administrative functions empower the admin to manage the product inventory by adding, editing, and removing items. On the user side, an array of features enriches the shopping experience, allowing them to create wishlists, purchase products, manage wishlist items, and establish communication with the admin through email correspondence. This comprehensive approach fosters a sense of community engagement and conscious consumerism.
I wanted to keep the colour scheme quite simpley so its easy for the user to navigate and not get distracted while on the website The colour i used is
There are the main colours used in the site.
The predominant font utilized across the entire website was 'Lato'.
font-family: 'Lato';
| EPIC | ID | User Story |
|---|---|---|
| VIEWING AND NAVIGATION | ||
| 1.A | As a user, I want to understand the purpose of the website from the first interaction with it content | |
| 1.B | As a user, I want to be able to easily use the site functionalities on all viewports, so I can shop the products from any device | |
| 1.C | As a user, I want to see a footer with relevant information and documents | |
| 1.D | As a user, I want to be able to access a navigation menu at any time, so I can easily navigate through the website content | |
| 1.E | As a user, I want to be able search through site products by entering a key word | |
| USER REGISTRATION/AUTENTHICATION | ||
| 2.A | As a user, I want to be able to register on the website | |
| 2.B | As a user, I want to be able to confirm my account with an email | |
| 2.C | As a user/admin, I want to be able to authenticate using only email and password | |
| 2.D | As a user, I want to be able to reset my password in case I forgot it | |
| 2.E | As a user/admin, I want to be able to log out at any time | |
| PRODUCTS | ||
| 3.A | As a user, I want to see a catalog with all the products and also grouped by categories | |
| 3.B | US - As a user, I want to be able to apply filters and to sort the listed products, so I can easily find the ones I am interested to buy | |
| 3.C | As a user, I want to be able to see the stock availability for low stock products | |
| 3.D | As a user, I want to see a page with full specifications for every product, so I can easily decide which one I would want to buy | |
| 3.E | As a user, I want to be able to add any product to the shopping bag in a selected quantity | |
| 3.F | As an admin, I want to be able to edit product details | |
| 3.G | As an admin, I want to be able to delete products from the catalog, so it reflect the existent stock | |
| 3.H | As an admin, I want to be able to add new products to catalog, so it reflects the existent stock | |
| BAG | ||
| 6.A | As a user, I want to see all the products I added to the shopping bag | |
| 6.B | As a user, I want to be able to add/remove from the wishlist any product from the shopping bag | |
| 6.C | As a user, I want to see all the details about the price for the order | |
| 6.D | As a user, I want to be able to remove a product from the shopping bag | |
| 6.E | As a user, I want to be able to edit the quantity of the products | |
| 6.F | As a user, I want that all the discounts announced on the website to be applied properly | |
| 6.G | As a user, I want to be able to add my vouchers to the order | |
| CHECKOUT | ||
| 7.A | As a logged-in user, I want to be able to see and edit my default delivery details for the order | |
| 7.B | As a user, I want to see the order summary with all the price details | |
| 7.C | As a user, I want to be able to add my delivery details for the order | |
| 7.D | As a user I want to be able to introduce my card details for payment | |
| USER PROFILE | ||
| 8.A | As a logged in user, I want to be able to see and edit my delivery details | |
| 8.B | As a logged-in user, I want to be able to see my orders history | |
| 8.C | As a logged-in user, I want to see the full details for every order I placed on the website | |
| CONTACT | ||
| 9.A | As an admin, I want to be able to see all messages sent from user | |
| 9.B | As an use, I want to be able to send a email to the website | |
| NEWSLETTER | ||
| 10.A | As a user, I want to be able to subscribe to a newsletter, so I can always be up to date with the latest promotions | |
| REVIEWS | ||
| 4.A | As a user, I want to be able to see all the reviews added for any product, so I can easily make an opinion about its quality | |
| 4.B | As a logged in user, I want to be able to add a review for any product I want | |
| 4.C | As a user, I want to be able to see a general review of every product | |
| WISHLIST | ||
| 5.A | As a logged-in user, I want to be able to add/remove any product from the Wishlist | |
| 5.B | As a logged-in user, I want to see all the products added to Wishlist | |
| 5.C | As a logged-in user, I want to be able to add products to the shopping bag from the Wishlist page | |
| 5.D | As a user, I want to see how many times a product has been added to Wishlist by all the users |
To have a better plan for developing my website, I utilized Justinmind.com to produce wireframes that serve as a guide on how I want the website to be created
- This is the page a user lands on when arriving at the site. It welcomes them to the site and gives them an idea of what the site sells. A button is present that will bring the user to the site's product page.
Click to View Home-Page
- Across the entirety of the website, users have continuous access to the primary navigation menu. This menu incorporates various functionalities such as a search bar, the ability to access one's account or profile, a link to the shopping basket, and a displayed total if there are items present in the user's basket. Additionally, there are links provided for filtering products by platform and category. Furthermore, a link to the website's blog is also available
Click to View Main Nav Menu
- Utilizing the navigation menu's search bar, users have the capability to locate particular products. The search term entered is cross-referenced with the names and descriptions of products, resulting in a compilation of products that correspond to the search query. Moreover, the user is presented with information regarding the number of outcomes generated by their search term. In instances where the user clicks the search button without inputting any text, an error message is displayed.
Click to View Search-Bar
- This page encompasses the entire range of products available for sale on the site.
Click to View All Products page
- Every individual product is presented within its own card, featuring essential details such as the product's image, name, rating, favorited status, and price.
Click to View Product Card
- While browsing the "All Products" page, users have the ability to arrange the products using various sorting options. These options encompass Products can be sorted by: Price (low to high), Price (high to low),Rating (A-Z), Rating (Z-A), Name (A-Z), Name (Z-A), Category (A-Z), Category (Z-A)
Click to View Sorting Products
- The blog section comprises a compilation of articles centered around Vintage clothing and furniture, as well as strategies for reducing, reusing, and recycling, all of which are available for purchase on the site. Each blog post is accompanied by a primary image, a title, a brief preview, the author's name, the number of likes the post has received, and its publication date. Users have the option to click on a post to access the complete content.
Click to Blog page
- Commenting / Likes
-
My profile is located in my account along the navbar
-
The user profile section encompasses personal information, providing users with the capability to update their address, name, and phone number. Additionally, users can access their recent order history through this page, gaining insights into their past purchases.
Click to My profile
- The Star symbol located on the product card will add to ur wishlist so from there you can then Add the product at a later date when it suuits you best but you need to be logged in for these features to be accesible
Click to My wishlist
Click to Star icon
- The User can Add to bag where they can finish of the requirments to get there products sent to them , The user can also delete an item they do longer want to keep in there wishlist.
Click to WishList Page
Click to Bag
- After successfully adding a product to their shopping bag, users receive feedback confirming that the addition was completed accurately.
- Upon reaching the Secure Checkout page, users are also greeted with the opportunity to receive free delivery as part of the feedback process
- When users are ready to proceed with their selected items and move to the next step, they can click on the "Checkout" option. This action will redirect them to the checkout page.
Click to Checkout form
- This is the section where users input their delivery details and provide their credit card information to complete the transaction.
- Order info after submiting details and card.
Click to Contact-Us
- This form serves as a means for users to initiate contact with us, allowing them to inquire about any matters concerning their purchases, upcoming events, or even submit job applications
Click to Admin Inbox
* The administrative authority oversees the connection between the Admin inbox and the contact form.
Review
- The product review can be found on the product detail page, and it's accessible for user input only when they are logged in.
Review (CRUD)
- Once the user is logged in, they have the ability to submit their review. They also retain the option to delete or modify it at any point, thus enjoying comprehensive CRUD (Create, Read, Update, Delete) functionality.
Click to Footer
- The footer of each page on the site consistently showcases a newsletter subscription option, social media icons, and copyright information.
- The newsletter feature is interactive and accessible to users. It is integrated with Mailchimp, allowing users to subscribe. Upon subscription, users receive emails from the site containing information about discounts and special offers for first-time sign-ups.
-
In the future, I plan to implement a feature that enables me to generate discount codes. This will allow users to enjoy a 10% or 20% reduction in the prices of our offered products. These discount codes could be distributed through the newsletter using Mailchimp or be part of promotions on our marketing Facebook page. They might also be extended to new users joining the site or as a reward for our long-term customers.
-
During the project's development, I made attempts to integrate this feature using Mailchimp. However, I encountered persistent issues with the JavaScript code. I've documented the code in my commits, and I plan to revisit it when I have a more substantial amount of time available. This feature holds a high priority as it directly contributes to retaining customer engagement and encouraging consistent visits to the website.
-
Upon reassessing my time allocation, I realized that resolving these challenges was consuming a significant portion of my schedule. Consequently, I opted to explore alternative feature ideas that could be implemented more efficiently. I've compiled screenshots of the code I attempted to incorporate, which you can find below for reference.
-
After recognizing that I was dedicating excessive time to the task and reevaluating my ideas, I reached the conclusion that it's more beneficial to explore new avenues instead of delving deep into intricate coding, which consumes both my time and attention, especially when I could accomplish the same objectives more efficiently. Hence, I took my ideas and devised a more improved plan to meet my deadline.
- We provide the option for refunds and/or exchanges within the initial 30 days of your purchase. If this 30-day window has lapsed since your purchase, regrettably, we cannot offer any form of refund or exchange. It's imperative that the item remains unused and is returned in the same condition it was received for the eligibility of a refund or exchange.
- I intend to return and establish a platform where individuals can engage in clothing and furniture trading among themselves. Additionally, they will have the option to donate items they no longer require, allowing others to benefit from them in the future. This approach aims to contribute to a more sustainable future by diminishing the accumulation of unused items.
When targeting vintage clothing and furniture stores, it's essential to use keyword phrases that reflect the specific products and services you offer. Here are some keyword phrases that can help attract the right audience to your vintage clothing and furniture store:
- Vintage clothing store near me
- Retro furniture shop online
- Best vintage clothing finds
- Antique furniture showroom
- Vintage clothing for sale
- Affordable retro furniture
- Classic clothing and furniture
- Vintage fashion boutique
- Retro home decor store
- Vintage clothing and accessories
- High-quality antique furniture
- Vintage-inspired fashion store
- Unique retro furniture pieces
- Vintage clothing collection
- Retro furniture online shop
- Vintage clothing deals
- Timeless antique furniture
- Vintage clothing shop online
- Retro furniture for home
- Vintage clothing and decor
- Vintage furniture warehouse
- Retro furniture styles
- Vintage clothing sale
- Antique furniture for sale
- Vintage clothing treasures
- Modern retro furniture
- Vintage clothing consignment
- Vintage furniture restoration
- Vintage clothing store discounts
- Vintage furniture shop near me
- Vintage clothing online store
- Vintage furniture clearance sale
- Classic vintage clothing pieces
- Vintage furniture buying guide
- Vintage clothing store reviews
- Retro furniture on a budget
- Vintage clothing shop recommendations
- Retro furniture interior design
Vintage clothing and furniture package deals These keyword phrases encompass both vintage clothing and furniture, helping potential customers find your store and the unique products you offer.
For a website that sells vintage accessories, furniture, and clothing
- Vintage accessories
- Retro furniture
- Classic clothing
- Antique decor
- Nostalgic jewelry
- Timeless fashion
- Vintage home accessories
- Retro furnishings
- Classic style clothing
- Antique jewelry
- Vintage fashion
- Retro home decor
- Classic furniture
- Nostalgia clothing
- Timeless accessories
- Vintage collectibles
- Retro fashion trends
- Classic watches
- Antique textiles
- Vintage furniture pieces
- Retro handbags
- Classic wardrobe
- Thift shops
- Digging
- Vintage clothing
- Fresh vintage
This e-commerce website operates on a simple Business-to-Customer (B2C) model, catering to individual customers. The focus is on individual transactions, and there are no subscription services involved. While still in its early development stages, the site already includes features like a newsletter and links for social media marketing.
The incorporation of social media is seen as an opportunity to build a community around the business and increase site visitor numbers, particularly by leveraging larger platforms like Facebook.
The newsletter serves as a valuable communication tool, allowing the business to regularly engage with site users. It can be used to share information about special offers, discountcodes, new inventory, updates to business hours, notifications of events, and other relevant updates.
Overall, this B2C e-commerce business is laying the groundwork for growth and customer engagement through strategic use of social media and a newsletter to keep users informed and connected with the brand.
This project utilized GitHub Projects as an Agile tool. Although not a dedicated tool, it was customized with appropriate tags, project creation, and issue assignments to fit the project's needs.
The tool was used to visualize the development progress of the project by mapping user stories onto a basic Kanban board. It enabled me to identify the work backlog and to move tasks across the board as they were being worked on, tested, and signed off upon completion.
GitHub Issues served as an another Agile tool. There, I used my own User Story Template to manage user stories and created a Bug tag to track and monitor issues on the site to be worked on.
Prior to prioritizing and implementing the Epics, I broke them down into smaller stories using a decomposition approach. This method enabled me to apply the MoSCoW prioritization and labels to the individual user stories within the Issues tab
- Must have = Guaranteed delivery.
- Could have = has small impact if left out.
- Bug
- Enhancement = To make to site more user friendly.
For all testing, please refer to the Testing.md file.
I used this guide throughout my project for solving terminal issues.
-
HTML used for the main site content.
-
CSS used for the main site design and layout.
-
CSS:root variables :root variables used for reusable styles throughout the site.
-
Bootstrap used as the front-end CSS framework for modern responsiveness and pre-built components.
-
Python used as the back-end programming language.
-
Git used for version control. (git add, git commit, git push)
-
GitHub used for secure online code storage.
-
Gitpod used as a cloud-based IDE for development.
-
Django used as the Python framework for the site.
-
PostgreSQL used as the relational database management.
-
ElephantSQL used as the Postgres database.
-
Heroku used for hosting the deployed back-end site.
-
Pillow Used for handling images
-
Django summernote used for the body field for blog posts.
-
Stripe used for online secure payments of ecommerce products/services.
-
Code Spell Checkerdiff checker used to check for typos in my README and TESTING files.# Deployment
-
Javascript used for user interaction on the site.
-
AWS used for online static file storage.
The live Link to deployment can be found on Live link Heroku
This project uses ElephantSQL for the PostgreSQL Database.
To obtain your own Postgres Database, sign-up with your GitHub account, then follow these steps:
- Click Create New Instance to start a new database.
- Provide a name (this is commonly the name of the project: tribe).
- Select the Tiny Turtle (Free) plan.
- You can leave the Tags blank.
- Select the Region and Data Center closest to you.
- Once created, click on the new database name, where you can view the database URL and Password.
- This project uses ElephantSQL for the PostgreSQL Database.
To acquire your own Postgres Database, first, sign up using your GitHub account, and then follow these steps:
- Click Create New Instance to start a new database.
- Provide a name ( Fresh Vinatge ).
- Select the Tiny Turtle (Free) plan.
- You can leave the Tags blank.
- Select the Region and Data Center closest to you.
- Once created, click on the new database name, where you can view the database URL and Password.
This project utilizes AWS to store media and static files in the cloud since Heroku does not support persistent storage for this type of data.
After creating your AWS account and logging in, proceed with the following steps to establish the connection for your project. Ensure that you are on the AWS Management Console page:
- Create an AWS account and log in.
- Access the AWS Management Console page.
- Follow this series of steps to establish the connection for your project.
- Search for S3.
- Click on "Create Bucket" to start the process of creating a new bucket.
- From Object Ownership, make sure to have ACLs enabled, and Bucket owner preferred selected.
- Uncheck Block all public access, and acknowledge that the bucket will be public (required for it to work on Heroku).
- om the Properties tab, turn on static website hosting, and type index.html and error.html in their respective fields, then click Save.
- Give your new bucket a name that matches your Heroku app name. For example, if your Heroku app is called "my-awesome-app," you can name your bucket "my-awesome-app" as well.
- From the Permissions tab, paste in the following CORS configuration:
1. Copy your ARN string.
-
From the Bucket Policy tab, select the Policy Generator link, and use the following steps:
-
Policy Type: S3 Bucket Policy
-
Effect: Allow
-
Principal: *
-
Actions: GetObject
-
Amazon Resource Name (ARN): paste-your-ARN-here
-
Click Add Statement
-
Click Generate Policy
-
Copy the entire Policy, and paste it into the Bucket Policy Editor
-
Before finalizing, append "/*" to the Resource key within the Bucket Policy Editor (as shown above) before clicking on "Save."
-
Click Save.
-
Proceed to the Access Control List (ACL) section, select "Edit," and enable the "List" option for Everyone (public access). Confirm your action by accepting the warning box.
-
If the "Edit" button is disabled, you should navigate to the "Object Ownership" section mentioned earlier and enable ACLs (Access Control Lists) from there. Once ACLs are enabled, you can go back to the Access Control List (ACL) section, and the "Edit" button should now be available for you to make the necessary changes.
Upon returning to the AWS Services Menu, locate and access IAM (Identity and Access Management). After reaching the IAM page, please follow these steps:
- Navigate to the "Users" section and click on "Add user" to create a new IAM user.
- Specify the desired username for the new IAM user.
- Choose the access type - "Programmatic access" (for API and CLI access) and/or "AWS Management Console access" (for web-based console access).
- Set permissions for the IAM user. You can either add the user to an existing IAM group with predefined policies or attach policies directly to the user.
- Optionally, configure tags for the IAM user for better organization and identification.
- Review the user's settings and permissions to ensure they are accurate.
- Click on "Create user" to finalize the creation of the new IAM user.
- Remember to securely save the access credentials (e.g., Access Key ID and Secret Access Key) if you selected "Programmatic access" to avoid any accidental exposure.
- From the JSON tab, select the Import Managed Policy link. ** Search for S3, select the AmazonS3FullAccess policy, and then Import.
** You'll need your ARN from the S3 Bucket copied again, which is pasted into "Resources" key on the Policy.
Heroku, a platform as a service (PaaS), was employed for this project. This cloud-based platform enables developers to build, run, and manage applications entirely on the cloud.
Deployment steps are as follows, after account setup:
- Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
- Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set your environment variables.
- CLOUDINARY_URL - insert your own Cloudinary API key here
- DATABASE_URL - insert your own ElephantSQL database URL here
- DISABLE_COLLECTSTATIC - 1 (this is temporary, and can be removed for the final deployment)
- SECRET_KEY - this can be any random secret key
Heroku needs two additional files in order to deploy properly.
-
requirements.txt
-
Procfile You can install this project's requirements (where applicable) using:
-
pip3 install -r requirements.txt If you have your own packages that have been installed, then the requirements file needs updated using:
-
pip3 freeze --local > requirements.txt The Procfile can be created with the following command:
-
echo web: gunicorn app_name.wsgi > Procfile
-
replace app_name with the name of your primary Django app name; the folder where settings.py is located For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:
Either:
- Select Automatic Deployment from the Heroku app / You Can also Manual deploy.
Or:
- In the Terminal/CLI, connect to Heroku using this command: heroku login -i
- Set the remote for Heroku: heroku git:remote -a app_name (replace app_name with your app name)
- After performing the standard Git add, commit, and push to GitHub, you can now type:
- git push heroku main
The project should now be connected and deployed to Heroku & everything should deploy correctly!
This project can be cloned or forked in order to make a local copy on your own system.
For either method, you will need to install any applicable packages found within the requirements.txt file.
- pip3 install -r requirements.txt. You will need to create a new file called env.py at the root-level, and include the same environment variables listed above from the Heroku deployment steps.
Sample env.py file: import os
os.environ.setdefault("CLOUDINARY_URL", "insert your own Cloudinary API key here") os.environ.setdefault("DATABASE_URL", "insert your own ElephantSQL database URL here") os.environ.setdefault("SECRET_KEY", "this can be any random secret key")
Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:
- Start the Django app: python3 manage.py runserver
- Stop the app once it's loaded: CTRL+C or ⌘+C (Mac)
- Make any necessary migrations: python3 manage.py makemigrations
- Migrate the data to the database: python3 manage.py migrate
- Create a superuser: python3 manage.py createsuperuser
- Load fixtures (if applicable): python3 manage.py loaddata file-name.json (repeat for each file)
- Everything should be ready now, so run the Django app again: python3 manage.py runserver
You can clone the repository by following these steps:
- Go to the ur Github repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
- git clone
- Press Enter to create your local clone.
- I used code institutes project 5 Boutique Ado E commerence tutorial to get me up and running with a template so i can then add new features to Create a fully functionaly website applcation.
- I wanna Thank Ben Kanvanagh for the guidance in this project , Helping me to test my boundiers.
- All photos used on throughout the site are used from www.pexels.com and www.upslash.com .
- I used Django: The web framework for perfectionists with deadlines https://www.djangoproject.com.
- I used flexbox to make the website more easier and to make it mote responsive i used a guide from csstrick.com to be able to implement this to suit my site. to create the about and donation page - flexbox tricks
- I wanna Thank slack communtiy were i could easily search a problem that a previous student might have had Meaning i could fix this.
- I want to thank any tutor that had helped me along the way ith getting past errors in the terminal.