↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

django-react-ecommerce

eCommerce TypeScript


MS4 Thrift-Hub

An online thriftstore.
An app that allows users to post second-hand goods and connect with members interested in such goods.

Contents

UX

User Stories

New Visitor Goals

  • As a new vistor, I want to have a good understanding of what the website does.
  • As a new visitor, I want to be able to register for an account.

Returning Visitor Goals

  • As a Returning Visitor, I want to be able to log in securely.
  • As a Returning Visitor, I want to be able to create a listing.
  • As a Returning Visitor, I want to be able to see my listing.
  • As a Returning Visitor, I want to be able to edit my listing.
  • As a Returning Visitor, I want to be able to delete my listing.
  • As a Returning Visitor, I want to be able to sell my listing.
  • As a Returning Visitor, I want to be able to connect with who is purchasing my listing.
  • As a Returning Visitor, I want to be able to collect payment from who is purchasing my listing.
  • As a Returning Visitor, I want to be able to cancel the purchase of my listing.

Frequent Visitor Goals

  • As a Frequent Visitor, I want to be able to search listings I have created.
  • As a Frequent Visitor, I want to be able to search listings created by others.
  • As a Frequent Visitor, I want to be able to save listings created by others.
  • As a Frequent Visitor, I want to be able to see my saved listings created by others.
  • As a Frequent Visitor, I want to be able to remove listings created by others I have previously saved.
  • As a Frequent Visitor, I want to able to delete my account.

Wireframes

Concept

The project can be understood as a social network with collections or arrangements with the ability to broadcast items for sale or guage prices for second-hand goods.

Store (items)

Categories (playlist)

Search (filter)

Membership/payments (e-commerce)

Design

Theme

Colors

Features

Existing Features

User Registration

  • The website features the ability to sign up, sign in and sign out in order to conditionally access existing features. A user is based on the user model, which requires username, email and password for new users and only the latter two for existing users. For security, only usernames are stored in local storage while tokens are stored in memory. To ensure sign out across multiple open windows, a logout event triggers a storage event listener which clears tokens and usernames in the memory of the current window.
  • Actions:
  • Ability to create an account. (any User)
  • Ability to sign in to an account. (Registered Owner)
  • Ability to sign out of an account. (Registed Owner)

Products

  • The website features the ability to create, update and delete a product listing. A product listing is based on the Product model and each field is represented as either a form field or a section in an article depending on whether a product is being edited or being featured.
  • Actions:
  • Ability to create, edit and delete a product listing. (Registered Owner)
  • Ability to save and un-save a product listing. (Registered User)

Collections

  • The website features the ability to group any and all existing products into named collections aka bulk deals. A collection is based on the collection model, which is a name and a list of product listings. Each field is represented as either a form field or a header followed by a ul depending on whether a collection is in edit or display mode.
  • Actions:
  • Ability to create, edit and delete a named collection. (Registered Owner)
  • Ability to add and remove snippets to/from a collection. (Registered Owner)

Search

  • search_text indices are attached to the title and description fields of the product cluster. The frontend UI of the search feature is designed to return product listings that match a query. Additionally, the ability to query by tags and product_type is enabled by filtering these existing fields in the database.
  • Actions:
  • Ability to search product listings created by others. (any User)
  • Ability to filter product listings by type. (any User)
  • Ability to filter product listings by tags. (any User)
  • Ability to save or un-save product listings from search. (Registered User)
  • Ability to perform crud operations on product listings from search. (Registered Owner)

Features Left to Implement

  • Add query params to all resources
  • User profile page
  • Ability to add friends

Technologies

Frameworks and Libraries

  • cd frontend

    <p>
  Please visit the frontend sub directory for details on ReactJS Typescript frameworks and libraries.</li> </ul> 
  
  <p>
    Go to frontend
  </p>
  
  <ul dir="auto">
    <li>
      <h3 dir="auto">
        <a rel="nofollow noopener" target="_blank" id="user-content-cd-backend" class="anchor" aria-hidden="true" href="#cd-backend"></a><code>cd backend</code><br />
      </h3>
      
      <p>
        Please visit the backend root directory for details on Python-Django frameworks and libraries.</li> </ul> 
        
        <p>
          Go to backend
        </p>
        
        <h3 dir="auto">
          <a rel="nofollow noopener" target="_blank" id="user-content-programs-and-software" class="anchor" aria-hidden="true" href="#programs-and-software"></a>Programs and Software
        </h3>
        
        <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://www.vscode.com/">VSCode:</a> Visual Studiio Code 2020.3.2 by <a rel="nofollow noopener" target="_blank" href="https://www.microsoft.com/">Microsoft</a> is the IDE used to locally construct the project
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://git-scm.com/">Git:</a> Git is used as the version control system and is utilized via the WebStorm terminal to <code>commit</code> to Git and <code>push</code> to GitHub.
          </li>
          <li>
            GitHub: GitHub is used to store the project&#8217;s code and directory upon concurrent <code>push</code>es via Git.
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://www.adobe.com/sea/products/xd.html">Adobe InDesign:</a> Adobe InDesign is used to mock wireframes.
          </li>
        </ul>
        
        <h2 dir="auto">
          <a rel="nofollow noopener" target="_blank" id="user-content-notes" class="anchor" aria-hidden="true" href="#notes"></a>Notes
        </h2>
        
        <ul dir="auto">
          <li>
            &#8230;.
          </li>
        </ul>
        
        <h2 dir="auto">
          <a rel="nofollow noopener" target="_blank" id="user-content-testing" class="anchor" aria-hidden="true" href="#testing"></a>Testing
        </h2>
        
        <h3 dir="auto">
          <a rel="nofollow noopener" target="_blank" id="user-content-user-testing" class="anchor" aria-hidden="true" href="#user-testing"></a>User Testing
        </h3>
        
        <ul dir="auto">
          <li>
            As a new vistor, I want to have a good understanding of what the website does</p> <ul dir="auto">
              <li>
                User arrives at home page. <ul dir="auto">
                  <li>
                    The screen for <code>Cheathub</code> appears with a description of its functionality.
                  </li>
                  <li>
                    User reads description.
                  </li>
                </ul>
              </li>
              
              <li>
                User continues.
              </li>
            </ul>
          </li>
          
          <li>
            As a new visitor, I want to be able to register for an account.</p> <ul dir="auto">
              <li>
                User is clicks <code>Switch to sign up </code> <ul dir="auto">
                  <li>
                    The sign up form appears <ul dir="auto">
                      <li>
                        The username field is in focus
                      </li>
                      <li>
                        User types types a username, email and password. <ul dir="auto">
                          <li>
                            The username is taken.
                          </li>
                          <li>
                            An error toast alert appears.
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User modifies username
                      </li>
                    </ul>
                  </li>
                  
                  <li>
                    User is redirected to his/her <code>collections</code> profile.
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
              <li>
                Review:
              </li>
              <li>
                A user is able to securely create an account.
              </li>
            </ul>
          </li>
          
          <li>
            As a Returning Visitor, I want to be able to log in securely.</p> <ul dir="auto">
              <li>
                User clicks <code>Switch to sign in</code> <ul dir="auto">
                  <li>
                    The sign in form appears<br /> &#8211; The email field is in focus<br /> &#8211; User types types email and password.<br /> &#8211; User hits enter.<br /> &#8211; A success toast alert appears.</p> <ul dir="auto">
                      <li>
                        User is redirected to his/her <code>collections</code> profile.
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As a Returning Visitor, I want to be able to create a product listing</p> <ul dir="auto">
              <li>
                User clicks <code>Add new product</code> <ul dir="auto">
                  <li>
                    A form appears. <ul dir="auto">
                      <li>
                        The title field is in focus. <ul dir="auto">
                          <li>
                            User inputs <code>title</code>, <code>description</code>, <code>tags</code>
                          </li>
                          <li>
                            User uploads images.
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User clicks submit. <ul dir="auto">
                          <li>
                            A success toast alert appears.
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  
                  <li>
                    User is redirected to his/her <code>collections</code> profile.
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
              <li>
                Review:
              </li>
              <li>
                &#8230;
              </li>
            </ul>
          </li>
          
          <li>
            As a Returning Visitor, I want to be able to see my product listing.</p> <ul dir="auto">
              <li>
                User arrives at <code>Collections</code> profile. <ul dir="auto">
                  <li>
                    A product listing appears. <ul dir="auto">
                      <li>
                        User sees product listing interface with his/her
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
              <li>
                Review:
              </li>
              <li>
                &#8230;
              </li>
            </ul>
          </li>
          
          <li>
            As a Returning Visitor, I want to be able to edit my product listing.</p> <ul dir="auto">
              <li>
                User clicks <code>Edit this product</code> <ul dir="auto">
                  <li>
                    A form appears. <ul dir="auto">
                      <li>
                        The title field is in focus. <ul dir="auto">
                          <li>
                            User modifies <code>description</code>
                          </li>
                          <li>
                            User updates image.
                          </li>
                          <li>
                            User adds optional <code>source</code> url.
                          </li>
                          <li>
                            User adds additional optional <code>tags</code>
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User clicks submit. <ul dir="auto">
                          <li>
                            A success toast alert appears.
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  
                  <li>
                    User is redirected to his/her <code>collections</code> profile.
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As a Returning Visitor, I want to be able to delete my product listing(s).</p> <ul dir="auto">
              <li>
                User clicks <code>Edit this product</code> <ul dir="auto">
                  <li>
                    A form appears. <ul dir="auto">
                      <li>
                        The title field is in focus. <ul dir="auto">
                          <li>
                            User clicks <code>Delete</code> <ul dir="auto">
                              <li>
                                Modal appears
                              </li>
                              <li>
                                The cancel button is in focus
                              </li>
                              <li>
                                User confirms
                              </li>
                            </ul>
                          </li>
                          
                          <li>
                            The modal is closed
                          </li>
                          <li>
                            A success toast alert appears.
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  
                  <li>
                    User is redirected to his/her <code>collections</code> profile.
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As a Returning Visitor, I want to be able to create a collection of my product listings.</p> <ul dir="auto">
              <li>
                User clicks <code>Add New Collection</code> <ul dir="auto">
                  <li>
                    A form appears. <ul dir="auto">
                      <li>
                        The <code>name</code> field is in focus. <ul dir="auto">
                          <li>
                            User inputs names collection
                          </li>
                          <li>
                            User selects existing listings to add.
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User clicks submit. <ul dir="auto">
                          <li>
                            A success toast alert appears.
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  
                  <li>
                    User is redirected to his/her <code>collections</code> profile.
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As a Returning Visitor, I want to be able to see collections of my product listings.</p> <ul dir="auto">
              <li>
                User arrives at <code>Collections</code> profile. <ul dir="auto">
                  <li>
                    A <code>collections</code> card appears. <ul dir="auto">
                      <li>
                        User sees <code>collection</code> interface that includes product listings added.
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As a Returning Visitor, I want to be able to edit collections of my product listings.</p> <ul dir="auto">
              <li>
                User clicks <code>Edit this Collection</code> <ul dir="auto">
                  <li>
                    A form appears. <ul dir="auto">
                      <li>
                        The <code>name</code> field is in focus. <ul dir="auto">
                          <li>
                            User renames collection.
                          </li>
                          <li>
                            User uses <code>select</code> input add more products.
                          </li>
                          <li>
                            User uses <code>select</code> input to remove previous products.
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User clicks submit. <ul dir="auto">
                          <li>
                            A success toast alert appears.
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  
                  <li>
                    User is redirected to his/her <code>collections</code> profile.
                  </li>
                  <li>
                    An updated <code>collection</code> appears.
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As a Returning Visitor, I want to be able to delete a collection of my product listing(s).</p> <ul dir="auto">
              <li>
                User clicks <code>Edit this Collection</code> <ul dir="auto">
                  <li>
                    A form appears. <ul dir="auto">
                      <li>
                        The name field is in focus. <ul dir="auto">
                          <li>
                            User clicks <code>Delete</code> <ul dir="auto">
                              <li>
                                Modal appears
                              </li>
                              <li>
                                The cancel button is in focus
                              </li>
                              <li>
                                User confirms
                              </li>
                            </ul>
                          </li>
                          
                          <li>
                            The modal is closed
                          </li>
                          <li>
                            A success toast alert appears.
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  
                  <li>
                    User is redirected to his/her <code>collections</code> profile.
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As A Returning Visitor, I want to be able to connect with someone interested in my product listing.</p> <ul dir="auto">
              <li>
                &#8230; <ul dir="auto">
                  <li>
                    &#8230; <ul dir="auto">
                      <li>
                        &#8230;.
                      </li>
                      <li>
                        &#8230; <ul dir="auto">
                          <li>
                            &#8230;
                          </li>
                          <li>
                            &#8230;
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As A Returning Visitor, I want to be able to collect payment from someone purchasing my product.</p> <ul dir="auto">
              <li>
                &#8230; <ul dir="auto">
                  <li>
                    &#8230; <ul dir="auto">
                      <li>
                        &#8230;.
                      </li>
                      <li>
                        &#8230; <ul dir="auto">
                          <li>
                            &#8230;
                          </li>
                          <li>
                            &#8230;
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As A Returning Visitor, I want to be able to cancel a transaction.</p> <ul dir="auto">
              <li>
                &#8230; <ul dir="auto">
                  <li>
                    &#8230; <ul dir="auto">
                      <li>
                        &#8230;.
                      </li>
                      <li>
                        &#8230; <ul dir="auto">
                          <li>
                            &#8230;
                          </li>
                          <li>
                            &#8230;
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As A Returning Visitor, I want to be able to connect with someone with a product I am interested in purchasing.</p> <ul dir="auto">
              <li>
                &#8230; <ul dir="auto">
                  <li>
                    &#8230; <ul dir="auto">
                      <li>
                        &#8230;.
                      </li>
                      <li>
                        &#8230; <ul dir="auto">
                          <li>
                            &#8230;
                          </li>
                          <li>
                            &#8230;
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As A Returning Visitor, I want to be able to make payment to someone I am purchasing a product from.</p> <ul dir="auto">
              <li>
                &#8230; <ul dir="auto">
                  <li>
                    &#8230; <ul dir="auto">
                      <li>
                        &#8230;.
                      </li>
                      <li>
                        &#8230; <ul dir="auto">
                          <li>
                            &#8230;
                          </li>
                          <li>
                            &#8230;
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As a Frequent Visitor, I want to be able to search product listings I have created.</p> <ul dir="auto">
              <li>
                User clicks <code>Products</code> <ul dir="auto">
                  <li>
                    User is rerouted to <code>Products</code> page.
                  </li>
                  <li>
                    A feed of all product listings appear.
                  </li>
                  <li>
                    The <code>Product Search</code> input appears.
                  </li>
                  <li>
                    The <code>search</code> field is in focus. <ul dir="auto">
                      <li>
                        User types a <code>search text</code> <ul dir="auto">
                          <li>
                            The listings return products that match <code>search text</code>
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User uses <code>select</code> input to query by <code>product_type</code> <ul dir="auto">
                          <li>
                            The listings return products of <code>product_type</code>
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User uses <code>select</code> input to query by <code>tags</code> <ul dir="auto">
                          <li>
                            The listings return products that include input <code>tag</code>
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User clickes <code>Show All</code> <ul dir="auto">
                          <li>
                            The listings return most recent products posted.
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User scrolls to end of page <ul dir="auto">
                          <li>
                            The <code>pagination</code> buttons appear
                          </li>
                          <li>
                            User clicks <code>Next</code> <ul dir="auto">
                              <li>
                                Listings for next page appear.
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  
                  <li>
                    User continues
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          
          <li>
            As a Frequent Visitor, I want to be able to save product listings created by others.</p> <ul dir="auto">
              <li>
                User is in <code>Products</code> page. <ul dir="auto">
                  <li>
                    A feed of all product listings appear. <ul dir="auto">
                      <li>
                        User finds a product listing.
                      </li>
                      <li>
                        User clicks <code>Save</code> <ul dir="auto">
                          <li>
                            A success toast appears
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            I want to be able to see my saved product listings created by others.</p> <ul dir="auto">
              <li>
                User is in <code>Collections</code> page. <ul dir="auto">
                  <li>
                    A collection named <code>Saves</code> appears. <ul dir="auto">
                      <li>
                        User finds all saved products as a collection.
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As a Frequent Visitor, I want to be able to un-save product listings created by others I have previously saved.</p> <ul dir="auto">
              <li>
                User is in <code>Products</code> page. <ul dir="auto">
                  <li>
                    A feed of all product lustings appear. <ul dir="auto">
                      <li>
                        User finds a product listing.
                      </li>
                      <li>
                        User clicks <code>UnSave</code> <ul dir="auto">
                          <li>
                            A success toast appears
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        User clicks <code>Collections</code>
                      </li>
                      <li>
                        The faves collection appears.
                      </li>
                      <li>
                        User sees updated Saves.
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
            </ul>
          </li>
          
          <li>
            As a Frequent Visitor, I want to be able to delete my account.</p> <ul dir="auto">
              <li>
                User is clicks <code>Delete my account</code> <ul dir="auto">
                  <li>
                    Modal appears <ul dir="auto">
                      <li>
                        The cancel button is in focus <ul dir="auto">
                          <li>
                            User confirms
                          </li>
                        </ul>
                      </li>
                      
                      <li>
                        The modal is closed
                      </li>
                      <li>
                        Page is redirected to <code>/</code>
                      </li>
                      <li>
                        User is no longer able to log in with credentials
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              
              <li>
                User continues
              </li>
              <li>
                Review:
              </li>
              <li>
                A user is able to securely remove his/her history from the database.
              </li>
            </ul>
          </li>
        </ul>
        
        <h3 dir="auto">
          <a rel="nofollow noopener" target="_blank" id="user-content-code-testing" class="anchor" aria-hidden="true" href="#code-testing"></a>Code Testing
        </h3>
        
        <h4 dir="auto">
          <a rel="nofollow noopener" target="_blank" id="user-content-frontend" class="anchor" aria-hidden="true" href="#frontend"></a>Frontend
        </h4>
        
        <h5 dir="auto">
          <a rel="nofollow noopener" target="_blank" id="user-content-performance-accessibility-best-practices-seo-pwa" class="anchor" aria-hidden="true" href="#performance-accessibility-best-practices-seo-pwa"></a>Performance, Accessibility, Best Practices, SEO, PWA
        </h5>
        
        <p>
          View Latest Results
        </p>
        
        <ul dir="auto">
          <li>
            Lighthouse via Vercel is used to test performace, which produces unique results on every <code>git push</code>. lighthouse-badges is used to generate new badges for every deployment by installing <code>npm i -g lighthouse-badges</code> and pushing the&#8230;
          </li>
        </ul>


↑