Idea Byte Discussion + Design

This repo is to manage all discussion and design assets of Idea Byte.

• Frontend Data Documentation
• Backend API Documentation)

1. Table of Contents

• 1. Table of Contents
• 2. Introduction
• 3. Links
• 4. Development Setup
• 5. Features
• 6. Management Accounts
• 7. Technology & Design Stack
• 8. Design _ 8.1. Logo Design _ 8.2. Desktop Design
• 9. License

2. Introduction

Let's build a full stack project in just 5 days.

• Monday: Design UI & UX in Figma, implement frontend components in React
• Tuesday: Give interactivity with Redux
• Wednesday: Implement backend REST API
• Thursday: Integrate frontend and backend
• Friday: Present full stack project with slide

3. Links

• Organization:
  • https://github.com/ideabyte
• Repositories:
  • https://github.com/ideabyte/ideabyte
  • https://github.com/ideabyte/ideabyte-frontend
  • https://github.com/ideabyte/ideabyte-backend

4. Development Setup

• Determine a team/app name
  • Example: Idea Byte
• Create a Gmail account
  • Example: impactbyte.ideabyte@gmail.com
• Create GitHub account
  • Example: https://github.com/ideabyte-admin (free personal account)
• Create GitHub organization
  • Example: https://github.com/ideabyte (team organization)
• Update organization profile in settings
  • https://github.com/organizations/ideabyte/settings/profile
• Add team members on GitHub
  • https://github.com/orgs/ideabyte/people
• Setup repositories
  • primary: https://github.com/ideabyte
  • frontend: https://github.com/ideabyte-frontend
  • backend: https://github.com/ideabyte-backend
• Protect master branches
  • https://github.com/impactbyte-ideabyte/ideabyte-frontend/settings/branches
• Setup project with linked repositories
  • Example: https://github.com/orgs/impactbyte-ideabyte/projects/1
• Protect master branches
  • https://github.com/ideabyte/ideabyte-frontend/settings/branches
• Setup project with linked repositories
  • Example: https://github.com/orgs/ideabyte/projects/1

5. Features

• List the features we NEED, not what we WANT
• List the issues on how to implement it
  • https://github.com/ideabyte/ideabyte/issues
• Display introduction in homepage (/)
• Display all ideas in homepage (/ideas)
• Display about in about page (/about)
• Register new user (/register)
  • Put full name
  • Put username
  • Put email
  • Put password
  • Register button
• Login with registered user (/login)
  • Put username
  • Put password
  • Login button
• Check our own profile (/profile)
  • Full Name
  • Username
  • Email
  • Password should not be displayed
  • Remove user button
    • Remove our own user/profile
• Check other user's profile (/users/:username)
• Create a new idea in the idea editor (/create)
  • Put the title
  • Put an image or multiple images
    • This will be a cover image
  • Put some description
  • Date and time created automatically
  • Submit idea
• See the idea on its own (/ideas/:id)
  • Cover image
  • Title
  • Description
  • Date and time
  • Author
    • Link to user's profile
  • Details
• Update idea in the idea editor (/ideas/:id/edit)
  • Update the title and description
  • Remove our own idea
  • Resubmit the idea

6. Management Accounts

yourteamname@gmail.com

• Gmail
• Google Chrome Profile
• Uniregistry
• Cloudflare
• Figma
• Netlify
• Heroku
• GitHub Personal Admin
• GitHub Organization
• The Noun Project
• Unsplash
• Grammarly

7. Technology & Design Stack

• Management
  • Gmail: managing all emails
  • Google Keep: storing secrets
  • Google Drive: storing variety of assets
  • Google Slide: making the presentation
  • Git: managing versions in a repository
  • GitHub: managing repositories, with admin and organization
• Editor
  • Visual Studio Code: developing the software
  • Postman: storing API collections
• Contents
  • Figma: designing the logo, UI, UX
  • Unsplash: getting sample photos
  • unDraw: getting free SVG images
  • The Noun Project: getting icons
  • Grammarly: checking the writing and grammar
• Frontend
  • HTML: layouting the page
  • CSS: styling the page
  • JavaScript (ESNext): making the website interactive
  • React: component-based design
    • React Dev Tools: debugging React development
    • React Hot Loader: tweaking React components in real time
      • Hot Reloading in Create React App Without Ejecting
    • React Router DOM: routing the React app pages
    • React Formik: building the form in React
    • React Helmet: managing metadata in React
    • React Spinners: showing loading spinner when loading content
    • React Toastify: notifying information (success/error)
    • React Content Loader: showing skeleton of loading content
    • Styled Components: CSS in JS with styled
    • Emotion: CSS in JS
      • @emotion/styled: CSS in JS with styled
  • Draft.js: rich editing HTML text format in form field
  • Redux: managing the state across the React app
  • Redux Dev Tools: debugging Redux development
    • Using Redux Dev Tools Extension as Middleware
  • Redux Persist: Persist and rehydrate a redux store
  • Redux Middleware: managing plugins in Redux
    • Redux Thunk: managing asynchronous process in Redux
    • Connected React Router: managing history in React Router & Redux
• Backend
  • Node.js: JavaScript in the backend
  • Express: making the REST API
  • bcrypt: securing the password, also with salt
  • JWT (JSON Web Tokens): managing authorization with token after login
    • jsonwebtoken
  • NoSQL: non-relational database
    • MongoDB: document-based database
    • Robo 3T (formerly Robomongo): managing MongoDB data
    • Mongoose: ODM (Object Data Modeling) for MongoDB
  • SQL: relational database
    • MySQL: table-based database
    • MariaDB: table-based database
    • MySQL Workbench: designing and managing MySQL data
    • Knex.js: SQL query builder
    • Objection.js: ORM (Object Relational Mapping) for MongoDB
• Server
  • Netlify: hosting the frontend web application
  • Heroku: hosting the backend REST API in PaaS
    • Heroku mLab: hosting MongoDB in Heroku
    • Heroku Postgres: hosting PostgreSQL in Heroku
    • Heroku ClearDB MySQL: hosting MySQL in Heroku
    • https://elements.heroku.com/addons/jawsdb-maria: hosting MariaDB in Heroku
  • Digital Ocean: hosting any application in VPS
  • Google Cloud Platform
    • Google Compute Engine: hosting all applications
• Domain
  • Uniregistry: registering the domain
  • Cloudflare: managing the DNS (Domain Name Server) between domain and server
• Social Media
  • Twitter
  • Facebook
  • Instagram

8. Design

8.1. Logo Design

Figma: https://figma.com/file/Ulv3rNFBEvLpAYVQKyrQUf7R/Logo

8.2. Desktop Design

Figma: https://figma.com/file/fnUhskd1moNIQIefbwC0eknE/Desktop

9. License

• MIT License
• Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Thanks to Unsplash and The Noun Project.