Skip to content

Application Walkthrough

Prakirth Govardhanam edited this page Aug 2, 2024 · 1 revision

Information about 🎨 Image Barter Bazaar πŸ“Έ



Contents


Walkthrough

User Login/Sign Up

  • Login/Signup includes User Authentication & Authorization
  • System(database and Backend) authenticates and authorizes User based on their credentials
  • Upon successful authentication, Users/Customers can
    • View or edit their profiles,
    • Browse or search for products and
    • Proceed to Checkout to barter an image in exchange for the images they would like to own
  • User login page

  • User registration page ( logo and text remain the same for sign up page as well )


Home Page

  • Customers once authenticated will be welcomed with their name

  • Home page consists of :

    • 'Photo' & 'Art of the Day' images,
    • Images related to 'Theme of the Day'
  • If unauthenticated Users access the Home page they will be redirected to Login upon doing either of the following actions :

  • Unauthenticated Users can still :

    • search for images using the Search bar,
    • browse images in 'Products'
  • Non-User Home page

  • User Home page


Products

  • Images

    • 'Photo' & 'Art of the Day' images,
    • Authenticated and Unauthenticated Users can access all images using Search Filters
    • Only verified Users/Customers can add items to Cart and Checkout for payment
  • Search Filters

    • Authenticated and Unauthenticated Users can filter images by - Image Theme, Image Type & Artist
  • Cart

    • After authentication, Customer can :
      • add/remove items
      • access Checkout to purchase added products
  • Inventory

    • Only Admin has access
    • All Users/Customers information is accessible
    • All images information is accessible
    • All Carted items & Orders are accessible
  • Filter images by Type, Theme and Artist


Checkout

  • Displays all items added to Cart

  • Provides options to 'Change Quantity' or 'Remove', default quantity is 1

  • Provides options to 'Continue Shopping' or 'Proceed to Payment'

  • Checkout view of verified Customer


Payment Gateway

  • Final display of all items added to Cart with quantity

  • Provides options to 'Remove'

  • Explains payment procedure

  • Information about payment is to be filled in the form

  • Upon successful payment, redirects to Home page with success message

  • Payment view - payment procedure & items summary

  • Payment view - payment information

  • Successful Payment view - order & payment confirmation message



Demo video

...production in progress...



Features Implemented

Project Design

  • Define project directories and files
  • Use Figma to build ecommerce store design
  • Resources: Figma

Project Setup and HTML/CSS

  • Project Setup: Create a Django project.
  • HTML/CSS: Review and strengthen HTML and CSS skills.
  • Resources: Online HTML/CSS tutorials, Django documentation.

Django Fundamentals

  • Django Basics: Learn about Django's project structure, settings, and apps.
  • Models: Create Django models for products and categories.
  • Resources: Official Django documentation.

Django Views and Templates

  • Views: Create views to render product listings and detail pages.
  • Templates: Build HTML templates for product pages.
  • Resources: Django documentation on views and templates.

User Authentication

  • User Authentication: Implement user registration and login functionality.
  • Custom User Model: Create a custom user model with additional fields.
  • Resources: Django documentation on User authentication.


Resources