CRUD app to create and save code snippets, Flask/Python restful Api/backend and React/Typescript frontend

Overview

MS3 Cheat-Hub

A cheatsheet hub.

An app that organizes your code snippets into collections of cheat sheets and allows you to view, like and save others'.

The project is developed as part of MS3 Data Centric module at Code Institute. It is written with a Flask/Python restful backend API, and a React/Typescript CRA frontend.

Please visit the project at cheathub.vercel.app.

Additionally, the restful backend API can be viwed at cheathub-backend.herokuapp.com. For a sample response, please visit the /api/snippets endpoint.


In Development

Collaborate on this project

Send feedback anonymously


Note: Scripts in root package.json implement Yarn workspaces only to run development-specific scripts from root assuming all backend/frontend-specific configs have been set up. Running yarn from root has not yet been tested. For the meantime, cding to frontend and installing the React-App is the minimal reliable option to develop the app with a fixed and unchanging backend API. The backend package.json is solely for running python scripts from root. Backend API and data layer are superuser-specific given the production deployment, although local env variables are described in case anyone wants to locally serve a Mongo Atlas connection string from scratch. To be updated.

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 code snippet.
  • As a Returning Visitor, I want to be able to see my code snippet.
  • As a Returning Visitor, I want to be able to edit my code snippet.
  • As a Returning Visitor, I want to be able to delete my code snippet(s).
  • As a Returning Visitor, I want to be able to create a collection of my code snippets.
  • As a Returning Visitor, I want to be able to see collections of my code snippets.
  • As a Returning Visitor, I want to be able to edit collections of my code snippets.
  • As a Returning Visitor, I want to be able to delete a collection of my code snippets.

Frequent Visitor Goals

  • As a Frequent Visitor, I want to be able to search code snippets I have created.
  • As a Frequent Visitor, I want to be able to search code snippets created by others.
  • As a Frequent Visitor, I want to be able to like/fave code snippets created by others.
  • As a Frequent Visitor, I want to be able to see my favorite code snippets created by others.
  • As a Frequent Visitor, I want to be able to unlike/unfave code snippets created by others I have previously liked.
  • As a Frequent Visitor, I want to be able to reference and copy code snippets to the the clipboard.
  • As a Frequent Visitor, I want to able to delete my account.

Wireframes

Concept

The project can be understood as a library of user-created Albums or Playlists with the ability to organize, query and add items or tracks to those collections


Code Snippet (item)



Collection (playlist)



Search (filter)



Design

Accordion Cards

  • A consistent border is applied to all nodes with dynamic content. These discrete borders are designed to convey the scale of snippet item relative to a collection. These containers only vary in spacing and height and are responsible for visually conveying open and closed states of snippets in collections of snippets.

Theme

  • Chakra-UI's ThemeProvider wraps the app in order to pass styles down the component tree. See Chakra-UI.

Colors

  • The app features two sets of neutral tones for light mode and dark mode. Tones are applied to backgrounds while borders are rendered to highlight items and convey feedback. Tones are minimally set to three values within #fafafa and #010f08 in order to reserve state-changes to border sizes and scales.

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)

Code Snippets

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

Collections

  • The website features the ability to group any and all existing code snippets into named collections aka cheat sheets. A collection is based on the collection model, which is a name and a list of snippets. 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 snippets cluster. The frontend UI of the search feature is designed to return snippet cards that match a query. Additionally, the ability to query by tags and language is enabled by filtering these existing fields in the database.
  • Actions:
  • Ability to search code snippets created by others. (any User)
  • Ability to filter snippets by language. (any User)
  • Ability to filter snippets by tags. (any User)
  • Ability to copy snippets to the clipboard. (any User)
  • Ability to fave or unfave snippet results from search. (Registered User)
  • Ability to perform crud operations on snippet results from search. (Registered Owner)

Features Left to Implement

  • Add query params to all resources
  • Extend query parser to parse more than one query at a time
  • Optimize performance by dereferencing database records
  • User profile page
  • Ability to add friends
  • Ability to share snippets

Technologies

Frameworks and Libraries

  • cd frontend

    Please visit the frontend sub directory for details on ReactJS Typescript frameworks and libraries.\

Go to frontend

  • cd backend

    Please visit the backend root directory for details on Python Flask frameworks and libraries.

Go to backend

Programs and Software

  • VSCode: Visual Studiio Code 2020.3.2 by Microsoft is the IDE used to locally construct the project
  • Git: Git is used as the version control system and is utilized via the WebStorm terminal to commit to Git and push to GitHub.
  • GitHub: GitHub is used to store the project's code and directory upon concurrent pushes via Git.
  • Adobe InDesign: Adobe InDesign is used to mock wireframes.

Notes

  • Styles are written in-component and merge both Chakra-format and Framer-motion-format to achieve desired UI results. This is done by declaring motion boxes in Typescript to accespt Motion-Framer's HTML style props and Chakra's.
  • Pagination is only for search endpoint.
  • Access Token is stored in memory. Only usernames are stored in local storage, along with storage event listener for key app-logout which is triggered on logout and ensures all windows are logged out while the tokens are stored in a token blocklist cluster.

Testing

User Testing

Arrival

  • As a new vistor, I want to have a good understanding of what the website does
    • User arrives at home page.
      • The screen for Cheathub appears with a description of its functionality.
      • User reads description.
    • User continues.

sign up landing

Sign Up

  • As a new visitor, I want to be able to register for an account.
    • User is clicks Switch to sign up
      • The sign up form appears
        • The username field is in focus
        • User types types a username, email and password.
          • The username is taken.
          • An error toast alert appears.
        • User modifies username
      • User is redirected to his/her collections profile.
    • User continues
    • Review:
    • A user is able to securely create an account.

sign up

Sign In

  • As a Returning Visitor, I want to be able to log in securely.
    • User clicks Switch to sign in
      • The sign in form appears - The email field is in focus - User types types email and password. - User hits enter. - A success toast alert appears.
        • User is redirected to his/her collections profile.
    • User continues

sign in

Add and View Snippet

  • As a Returning Visitor, I want to be able to create a code snippet.

    • User clicks Add new snippet
      • A form appears.
        • The title field is in focus.
          • User inputs title, description, language
          • User pastes a code snippet.
        • User clicks submit.
          • A success toast alert appears.
      • User is redirected to his/her collections profile.
    • User continues
  • As a Returning Visitor, I want to be able to see my code snippet.

    • User arrives at Collections profile.
      • A snippet card appears.
        • User sees code snippet interface with his/her
    • User continues

add snippet

Add Another Snippet

add another snippet


Add Collection

  • As a Returning Visitor, I want to be able to create a collection of my code snippets.
    • User clicks Add New Collection
      • A form appears.
        • The name field is in focus.
          • User inputs names collection
          • User selects existing code snippets to add.
        • User clicks submit.
          • A success toast alert appears.
      • User is redirected to his/her collections profile.
    • User continues

add collection

View Collection

  • As a Returning Visitor, I want to be able to see collections of my code snippets.
    • User arrives at Collections profile.
      • A collections card appears.
        • User sees collection interface that includes snippets added.
    • User continues

view collection

Edit Collection Details

  • As a Returning Visitor, I want to be able to edit collections of my code snippets.
    • User clicks Edit this Collection
      • A form appears.
        • The name field is in focus.
          • User renames collection.
          • User uses select input add more snippets.
          • User uses select input to remove previous snippets.
        • User clicks submit.
          • A success toast alert appears.
      • User is redirected to his/her collections profile.
      • An updated collection appears.
    • User continues

edit collection name

Edit and View Snippet

  • As a Returning Visitor, I want to be able to edit my code snippet.
    • User clicks Edit this snippet
      • A form appears.
        • The title field is in focus.
          • User modifies description
          • User updates code snippet.
          • User adds optional source url.
          • User adds optional tags
        • User clicks submit.
          • A success toast alert appears.
      • User is redirected to his/her collections profile.
    • User continues

edit first snippet

Edit Another Snippet

edit another snippet


Delete Snippet

  • As a Returning Visitor, I want to be able to delete my code snippet(s).
    • User clicks Edit this snippet
      • A form appears.
        • The title field is in focus.
          • User clicks Delete
            • Modal appears
            • The cancel button is in focus
            • User confirms
          • The modal is closed
          • A success toast alert appears.
      • User is redirected to his/her collections profile.
    • User continues

delete first snippet

Delete Another Snippet

delete another snippet


Delete Collection

  • As a Returning Visitor, I want to be able to delete a collection of my code snippet(s).
    • User clicks Edit this Collection
      • A form appears.
        • The name field is in focus.
          • User clicks Delete
            • Modal appears
            • The cancel button is in focus
            • User confirms
          • The modal is closed
          • A success toast alert appears.
      • User is redirected to his/her collections profile.
    • User continues

delete collection

Search Snippets

  • As a Frequent Visitor, I want to be able to search code snippets I have created.
    • User clicks Snippets
      • User is rerouted to Snippets page.
      • A feed of all public snippet cards appear.
      • The Snippets Search input appears.
      • The search field is in focus.
        • User types a search text
          • The snippet cards return snippets that match search text
        • User uses select input to query by language
          • The snippet cards return snippets written in language
        • User uses select input to query by tags
          • The snippet cards return snippets that include input tag
        • User clickes Show All
          • The snippet cards return most recent snippets posted.
        • User scrolls to end of page
          • The pagination buttons appear
          • User clicks Next
            • Snippet cards for next page appear.
      • User continues

search

Fave/Unfave Snippet and View Faved/Unfaved Snippets

  • As a Frequent Visitor, I want to be able to like/fave code snippets created by others.
    • User is in Snippets page.
      • A feed of all public snippet cards appear.
        • User finds a snippet card.
        • User clicks Fave
          • A success toast appears
    • User continues
  • As a Frequent Visitor, I want to be able to unlike/unfave code snippets created by others.
    • User is in Snippets page.
      • A feed of all public snippet cards appear.
        • User finds a snippet card.
        • User clicks Unfave
          • A success toast appears
        • User clicks Collections
        • The faves collection appears.
        • User sees updated Faves.
    • User continues
  • As a Frequent Visitor, I want to be able to see my favorite code snippets created by others.
    • User is in Collections page.
      • A collection named Faves appears.
        • User finds all favorite snippts as a collection.
    • User continues

add fave and view faves

Copy Snippet to Clipboard

  • I want to be able to reference and copy code snippets to the clipboard.
    • User is in Search page.
      • A feed of all public snippet cards appear.
        • User finds a snippet card.
        • User clicks Copy button
          • The copy button changes to a success icon.
          • The code snippet is copied to the clipboard.
    • User continues

Delete Account

  • As a Frequent Visitor, I want to be able to delete my account.
    • User is clicks Delete my account
      • Modal appears
        • The cancel button is in focus
          • User confirms
        • The modal is closed
        • Page is redirected to /
        • User is no longer able to log in with credentials
    • User continues
    • Review:
    • A user is able to securely remove his/her history from the database.

delete account

Switch Theme

search

Note: All screen shots of expected results of User testing can be viewed in the public docs directory. Please view them here

Code Testing

Frontend

Performance, Accessibility, Best Practices, SEO, PWA

View Latest Results

  • Lighthouse via Vercel is used to test performace, which produces unique results on every git push. lighthouse-badges is used to generate new badges for every deployment by installing npm i -g lighthouse-badges and pushing the new hashed url to the array of urls:
    lighthouse-badges 
    -o docs/badges -r 
    -u https://cheathub.vercel.app/ [... all other urls]
                       
    # Output to docs/badges
    # Badges will contain the respective
      average score(s) of all the urls 
      supplied, combined
    
  • Lighthouse's metrics, namely Accessibility and Performance generate specific flags on each audit. Adjustments are made on each push that specifically address any issues.
Accessibility Testing
  • ChromeVox Extension was used to ensure that screen-reader accessibility standards are met. This was done by walking through the entire project with the screen-reader plugin enabled. Various adjustments were made following these tests. Notably, the tab-index order of nav elements, and changing refining HTML5 semantic elements for role clarity.
Browser Testing
  • Throughout the development of the project, in-browser dev tools were used to test for consistency across browsers. The browsers themselves were equally used for general use-case testing. The following browsers' per-device applications were accessed with an iPhone 11 Pro, MacBook Pro 15" and iPad Pro 12.9":
  • Chrome Version: 83
  • Firefox 82
  • Opera 72
  • Safari 14

Deployment

Cloning This Repo

  • Clone this repo by running git clone httpsL//github.com/israelias/cheathub
  • at the jump, cd to the name of this repo: cd cheathub

    cd frontend

    Please visit the frontend root directory for details on required modules via yarn install and to start the frontend development server on localhost:3000.

    cd backend

    Please visit the backend root directory for details on required modules via requirements.txt and to start the backend development server on localhost:5000.

Go to frontend
Go to backend

Credits

Content and Media

  • Code snippets used to fill the database are public cheat sheets gathered throughout the development of the project include url references in the snippet cards. The hello world feature collection is references from Say hello world in 28 different languages

Acknowledgments

ESLint and Typescript Configuration

ReactJS and Typescript References

Flask backend with React frontend References

Monorepo

Mentoring

  • Aaron Sinnott
  • Code Institute tutors
  • Fellow Code Institute students
Owner
Joem Elias Sanez
From Architect to Full-Stack Developer
Joem Elias Sanez
Template for creating ds simple projects

ds-project-template Template for creating ds simple projects Requirements pyenv python==3.9.4 Setup For this purpose you use following commands: pytho

1 Dec 17, 2021
Flask Boilerplate - Material Kit Design | AppSeed

Flask Boilerplate - Material Kit Design | AppSeed

App Generator 45 Nov 18, 2022
A Project Template With Python

File Structure . ├── LICENSE ├── Makefile # commands ├── README.md ├──

Annotation AI 61 Jan 02, 2023
CRUD app to create and save code snippets, Flask/Python restful Api/backend and React/Typescript frontend

MS3 Cheat-Hub A cheatsheet hub. An app that organizes your code snippets into collections of cheat sheets and allows you to view, like and save others

Joem Elias Sanez 21 Dec 28, 2022
A platform for developers 👩‍💻 who wants to share their programs and projects.

Hacktoberfest-2021 A platform for developers 👩‍💻 who wants to share their projects and programs. Hacktoberfest has updated their rules and now this

Mayank Choudhary 40 Nov 07, 2022
Generic python project template

generic-python-project-template generic-python-project-template STEPS - STEP 01- Create a repository by using template repository STEP 02- Clone the n

SUNNY BHAVEEN CHANDRA 3 Oct 03, 2022
A boilerplate for Django web applications

Django Hackathon Starter A boilerplate application for Django web applications. If you've attented hackathons, you already know how much time can be w

David Leonard 1.6k Dec 31, 2022
A Boilerplate repo for Scientific Python Open Science projects

A Boilerplate repo for Scientific Python Open Science projects Installation Clone this repo If you need a fresh python environment, run $ conda env cr

Vincent Choqueuse 2 Dec 23, 2021
The starter for the Flask React project

Flask React Project This is the starter for the Flask React project. Getting started Clone this repository (only this branch) git clone https://github

Parker Bolick 2 May 14, 2022
Django project/application starter for lazybones :)

Django Project Starter Template My custom project starter for Django! I’ll try to support every upcoming Django releases as much as I can! Requirement

Uğur Özyılmazel 40 Jul 16, 2022
Code Kata Python Template

Code Kata Python Template This is the code kata template for python created by Aula de Software Libre de la Universidad de Córdoba Step 1. Use this re

Sergio Gómez 2 Nov 30, 2021
A template for some new Python tool or package with a reasonable basic setup.

python-app-template A template with a reasonable basic setup, including: black (formatting) flake8 (linting) mypy (type checking) isort (import sortin

Anton Pirogov 3 Jul 19, 2022
Backend Boilerplate using Django,celery,Redis

Backend Boilerplate using Django,celery,Redis

Daniel Mawioo 2 Sep 14, 2022
Django Webpack starter template for using Webpack 5 with Django 3.1 & Bootstrap 4. Yes, it can hot-reload.

Django Webpack Starter Hello fellow human. The repo uses Python 3.9.* Django 3.1.* Webpack 5.4.* Bootstrap 4.5.* Pipenv If you have any questions twe

Ganesh Khade 56 Nov 28, 2022
Template repository to build PyTorch projects from source on any version of PyTorch/CUDA/cuDNN.

Template repository to build PyTorch projects from source on any version of PyTorch/CUDA/cuDNN.

Joonhyung Lee/이준형 651 Dec 12, 2022
A test Django application with production-level docker setup

DockerApp A test Django application with production-level docker setup. Blog: https://medium.com/@siddharth.sahu/the-near-perfect-dockerfile-for-djang

Siddharth Sahu 44 Nov 18, 2022
Ultimate Django3.2 Template for starting any project from not zero!

Ultimate Django3.2 Template for starting any project from not zero!

TheAliBigdeli 37 Dec 20, 2022
A simple cookiecutter to create Python Telegram bots, wrapped with Django.

PTB Django cookiecutter A simple cookiecutter to create Python Telegram bots, wrapped with Django. Based on this cool projects python-telegram-bot (PT

Carlos Lugones 20 Nov 12, 2022
Bleeding edge django template focused on code quality and security.

wemake-django-template Bleeding edge django2.2 template focused on code quality and security. Purpose This project is used to scaffold a django projec

wemake.services 1.6k Jan 08, 2023
Django starter project with 🔋

A batteries-included Django starter project. For a production-ready version see the book Django for Professionals. 🚀 Features Django 3.1 & Python 3.8

William Vincent 1.5k Jan 08, 2023