This website is designed to provide a seamless and secure shopping experience for airsoft enthusiasts. It aims to cater to both casual shoppers and registered users, offering a wide range of airsoft rifles and related products.
For viewing and navigation, the website provides a clear list of products and categories, allowing users to quickly find the products they're interested in. Detailed product information, including price, description, and specifications, are readily available. Users can also view their total purchases at any time to manage their spending.
The website also offers registration and user account functionalities. Users can register for an account, log in or out, recover their password, and receive email confirmations after registration. Registered users have access to a user profile where they can view their order history and save their payment information.
To further enhance the shopping experience, the website provides sorting and searching features. Users can sort products by price or category, search for products by name or description, and view search results along with the number of results.
The purchasing and checkout process is designed to be straightforward and secure. Users can select product quantities, view items in their cart, adjust quantities of cart items, and enter their payment information securely. After checkout, users can view a confirmation order and receive an email confirmation.
For the store owner, the website provides functionalities to add, edit, or delete products, allowing for efficient store management.
In summary, this website aims to provide a comprehensive, user-friendly, and secure online shopping platform for airsoft rifles and related products.
Requirements Gathering: Understand the needs of the users and the products that will be sold on the website. This includes details about the airsoft rifles and related products, as well as user information for account creation and order tracking.
Database Design: Design a database schema that accurately represents the products to be sold and the user data to be collected. This will involve defining tables for users, products, and orders, and establishing relationships between them.
User Interface Design: Design a user-friendly interface for users to register, log in, view products, add them to their cart, and checkout. The design should be intuitive and accessible to users of all ages and levels of technical proficiency.
Backend Development: Implement the server-side logic to handle user registration, login, product viewing, cart management, and order checkout. This includes validating and storing the data in the database, managing user sessions, and handling payment processing.
Frontend Development: Implement the client-side logic to interact with the backend, display products to the user, manage the shopping cart, and provide a smooth user experience.
Testing: Conduct thorough testing to ensure the website works as expected and handles edge cases gracefully. This includes testing the user registration, login, product viewing, cart management, and checkout processes.
Deployment: Deploy the website to a production environment and set up any necessary infrastructure, such as a database server and web server.
By following this plan, I can develop a website that meets the needs of both the airsoft enthusiasts who will be shopping on the site and the store owner who will be managing the products.
| User Story ID | As a/an | I want to be able to... | So that I can |
|---|---|---|---|
| 1 | Shopper | View a list of products | Select purchases |
| 2 | Shopper | View product categories | Find products quickly |
| 3 | Shopper | View details & specifications for each product | Identify price, description, product image, and specifications |
| 4 | Shopper | View the total of my purchases at any time | Avoid over spending |
| User Story ID | As a/an | I want to be able to... | So that I can |
|---|---|---|---|
| 5 | Site User | Register for an account | Have a personal account and view my profile |
| 6 | Site User | Login or logout | Access my personal account information |
| 7 | Site User | Recover my password | Recover access to my account |
| 8 | Site User | Receive an email confirmation after registering | Verify that my account registration was successful |
| 9 | Site User | Have a user profile | View my personal order history and order confirmations, and save my payment information |
| User Story ID | As a/an | I want to be able to... | So that I can |
|---|---|---|---|
| 10 | Shopper | Sort the list of available products | Identify the best priced and categorically sorted products |
| 11 | Shopper | Sort a specific product category | Find the best priced in a specific category, or sort the products in that category by name |
| 12 | Shopper | Sort multiple categories of products simultaneously | Find the best-priced products across broad categories, such as 'rifles', or 'pistols' |
| 13 | Shopper | Search by product name or description | Find a specific product I'd like to purchase |
| 14 | Shopper | See search results and the number of results | Quickly decide whether the product I want is available |
| User Story ID | As a/an | I want to be able to... | So that I can |
|---|---|---|---|
| 15 | Shopper | Select the product quantity | Ensure I don't accidentally select the options |
| 16 | Shopper | View the items in my cart | Identify the total cost |
| 17 | Shopper | Adjust the quantity of individual cart items | Make changes to my purchase(s) before checkout |
| 18 | Shopper | Enter my payment information | Check out without issue |
| 19 | Shopper | Feel my personal and payment information is safe and secure | Provide the required information to make a purchase |
| 20 | Shopper | View a confirmation order | Verify that the information is correct |
| 21 | Shopper | Receive an email confirmation once checkout is complete | Maintain a record |
| User Story ID | As a/an | I want to be able to... | So that I can |
|---|---|---|---|
| 22 | Store Owner | Add products | Add new items |
| 23 | Store Owner | Edit/Update a product | Change product information |
| 24 | Store Owner | Delete a product | Remove items |
- Home Page: An introductory page with featured products and categories. This addresses the need to understand the site's purpose and see a selection of products immediately.
- Product Viewing Page: A page where users can view all available products, addressing the need to browse the inventory.
- Product Detail Page: A page where users can view detailed information about a specific product, addressing the need to learn more about a product before purchasing.
- Cart Page: A page where users can view the items in their cart, adjust quantities, and proceed to checkout, addressing the need to manage their intended purchases.
- Checkout Page: A page where users can enter their payment information and complete their purchase, addressing the need to securely pay for their selected items.
- Account Registration Page: A page where users can register for an account, addressing the need for users to create their own accounts.
- Login Page: A page where users can log in to their accounts, addressing the need for users to access their accounts.
- Logout Functionality: A feature allowing users to log out of their accounts, addressing the need for users to securely end their sessions.
- Search Functionality: A feature allowing users to search for products by name or description, addressing the need to find specific products quickly.
- Product Sorting Functionality: A feature allowing users to sort products by price or category, addressing the need to organize the product view based on personal preferences.
- Admin Product Management Page: A page where the store owner can add, edit, or delete products, addressing the need for efficient store management.
- Confirmation Alerts: Alerts that confirm when a user has registered, logged in, added items to their cart, or completed a purchase.
- Email Confirmations: Emails sent to users after they register or complete a purchase, providing a record of these actions.
- Increasing the product options.
- Adding additional manufacturers.
- Configuring email confirmations.
The following metrics can be measured to track the website's success:
Google Analytics: This tool can provide a wealth of data about your website's users, including how they find your website, which pages they visit, how long they stay, and much more. This can help you understand what's working well and what might need improvement. Search Engine Listings: The position of your website in search engine results can be a good indicator of its visibility and reach. Tools like Google Search Console can provide insights into your website's search engine performance. Meta Descriptions and Titles: These are important for SEO and can influence click-through rates from search engine results. They should be descriptive and enticing, effectively summarizing the content of each page. User Feedback: Direct feedback from users can be invaluable in assessing the website's success. This could be collected through surveys, contact form submissions, or social media interactions. Conversion Rates: If your website has specific goals (like form submissions, sign-ups, or purchases), tracking the conversion rates for these actions can provide a clear measure of success. Page Load Times: Fast-loading pages provide a better user experience and are favored by search engines. Tools like Google's Lighthouse can help you measure and optimize your load times. Accessibility: Ensuring your website is accessible to all users, including those with disabilities, is not only a legal requirement in some instances but also improves your website's usability and reach. Tools like the WAVE Web Accessibility Evaluation Tool can help assess your website's accessibility.
Use semantic HTML: Semantic HTML elements provide important context about the content they contain, which can greatly enhance the experience for users of assistive technologies like screen readers. Ensure sufficient colour contrast: This is crucial for visually impaired users or those with color blindness. Tools like the WebAIM Color Contrast Checker can help verify that your color choices meet the recommended contrast ratios. Provide information for screen readers where appropriate (e.g. aria-labels): ARIA labels and other ARIA roles can provide additional context and improve navigation for screen reader users. Descriptive Link Text: Make sure all links have descriptive text (avoid text like "click here"). Screen reader users often navigate by tabbing through links, so descriptive link text is crucial.
- Home
- All Products
- By Price
- By Manufacturer
- By Category
- All Products
- Airsoft Guns
- Pistols
- Shotguns
- Submachine Guns
- Rifles
- Sniper Rifles
- Launchers
- All Airsoft Guns
- All Products
- My Account
- Product Management
- My Profile
- Login/Logout
- Cart
System fonts:
- system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
Pros:
- User does not need to download the font.
- No need to self host.
- Fast.
- Avoid GDPR issues
Cons:
- Not as unique.
- HTML
- CSS - Bootstrap
- JavaScript
- Python - Django
- Unsplash
- Kevin Powell: These font stacks will improve your site performance
- Code Institute
- Boutique Ado
- Land Warrior Airsoft
- Airsoftdirect.uk.com
- Code Institute Python Linter
- Django
- miniWebtool django secret key generator
VSCode and Github Desktop were used for local development and pushing code to GitHub.
- Log into GitHub.
- Go to the Kartilo repository.
- Select the 'Fork' button in the top right corner under your profile icon.
- Log into GitHub.
- Navigate to the repository you want to clone.
- Select the '<> Code' and copy the link for your preferred method of cloning the site.
- Use your terminal to navigate to the working directory you want use.
- Type git clone into the terminal and paste the link you copied in step 3 and press enter.
- Log/sign into Elephant SQL.
- Create a new team.
- Create new instance.
- Select your required plan.
- Select your region/closest data center.
- Review your details and create the instance.
- Return to the dashboard, click the database instance you have created, and store the database URL.
- Login into Heroku.
- Create and name a new app.
- Enter settings, reveal and populate the config vars.
- Click Deploy and select a deployment method of your choosing.
- Click 'More' and run the console.
- Type 'python' in the console and click 'run'.
- Enter the following into the termainl.
- from import app, db
- app.app_context().push()
- db.create_all()
- Exit the terminals with 'exit()'.
- Click 'Open app' to view your app.