This repo is to manage all discussion and design assets of Idea Byte.
-
- Design _ 8.1. Logo Design _ 8.2. Desktop Design
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
- Organization:
- Repositories:
- 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
- Add team members on GitHub
- Setup repositories
primary
: https://github.com/ideabytefrontend
: https://github.com/ideabyte-frontendbackend
: https://github.com/ideabyte-backend
- Protect
master
branches - Setup project with linked repositories
- Protect
master
branches - Setup project with linked repositories
- List the features we NEED, not what we WANT
- List the issues on how to implement it
- 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
- 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
yourteamname@gmail.com
- Gmail
- Google Chrome Profile
- Uniregistry
- Cloudflare
- Figma
- Netlify
- Heroku
- GitHub Personal Admin
- GitHub Organization
- The Noun Project
- Unsplash
- Grammarly
- 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
- 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 withstyled
- Draft.js: rich editing HTML text format in form field
- Redux: managing the state across the React app
- Redux Dev Tools: debugging Redux development
- 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
- 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
Figma: https://figma.com/file/Ulv3rNFBEvLpAYVQKyrQUf7R/Logo
Figma: https://figma.com/file/fnUhskd1moNIQIefbwC0eknE/Desktop
- MIT License
- Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
Thanks to Unsplash and The Noun Project.