nimbus021 / nsa-group-app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

NSA-Group-App

Initial Board

https://miro.com/app/board/uXjVOyDZFY4=/

Project Requirements

This milestone project takes place at the end of the web developer unit of the program. It's meant to put into practice skills learned in courses 6 (Back-end Development & APIs), 7 (React & Redux), and 8 (SQL & data Modeling)¸ as shown in the chart below.

Prompt: MERN Stack Application

Let's make an MERN Stack Application to practice our skills using React, Redux, and postgreSQL. This application can be just about anything and will assess your ability delegate the workload amongst your peers as well as get much needed practice using the GitHub workflow.

What is a MERN Stack Application?

An application that features an Express.js back-end connected to a MongoDB or postgreSQL database along with React App front-end interface. Beyond that, this application can be anything that your group wants.

Disclaimer: While it's great to look at existing MERN stack projects you can find online for inspiration, keep in mind the MVP and timeframe in which to complete your group project. Don't overload the application with too many bells and whistles.

Requirements

General Requirements

  • This is a group project!
  • Just to clarify, your instructional staff will help you in building groups in your cohort.
  • This game cannot be an assignment we've already done in class.
  • This application must run in a web browser.
  • This application must be tracked in GitHub, with a minimum of 20 commits.
  • Your empty project repository must be up on GitHub on day one of development and aim for multiple commits per day.
  • This application must be deployed! You will need to use a service like Heroku, as this project will need to have a deployed back-end.

Application Requirements

  • Your application must be a full-stack application using your own front and back-end.
  • Your application should use full CRUD functionality with the database.
  • Your application should be a complete product.
  • Your application must be deployed online using deployment sites like Heroku or Netlify.
  • Effort must be spent on styling and appearance
  • You should use several sensibly named components in React
  • The application should have a Readme.md file in the GitHub repository that describes the inspiration for the application, how to use the application, lists the technologies used to build the application, and addresses any outstanding bugs or unfinished functionality

Bonus Ideas

  • Utilize an external styling library for React like React-Bootstrap or Material UI.
  • Explore NPM packages that will help in the logic of your application.
  • Try to use the StateProvider in Redux to manipulate the state of your application.

Deliverables

  • A working application built by the whole group
  • A link to your application, which is deployed somewhere on the internet
  • A link to your GitHub repository, so we can see the progress on your application
  • A README.md file with the requirements stated above

Set up GitHub at the start

One person in your group will create a respository and give the other members of the group access after they clone it to their machine. Aim for multiple commits per day, ideally after you finish any small feature in a branch and make a pull request. Also, consider making an outline for your readme.md file as part of your planning process.

Commit early! Commit often!

Use those developer tools

Use console.log, alert, breakpoints, the inspector, and the debugger to get a glimpse of what's going on in your code. Know where to look to find errors and get used to interpreting common ones!

Know your documentation & sources

There are many places you can look for help and documentation:

  • Mozilla Developer Network- Documentation on JavaScript
  • ReactJS- Documentation on React
  • postgreSQL documentation- Documentation on postgreSQL
  • mongoosejs documentation- Documentation on mongoosejs
  • W3Schools- Reference for HTML, CSS, and JS
  • CSS Tricks - A CSS Reference containing more advanced CSS topics

Get Inspired!

  • ColorMind- Make a Color Pallette from an Image
  • MyColor- Generate a Color Pallette based around one color
  • Canva- Lots of stuff including a color pallette generator
  • Unsplash- Free Stock Images

Examples and Inspiration

Recipe Application

Utilize a server-side API to fetch recipes and then save your favorites to the database.

Online Learning Application

You can make an application that will teach and quiz your user on any subject you like. This project is for English Language Learners.

Social Meet-Up Application

Have you ever wanted to build a website that connected people based on their interests like music, movies, etc. Here is your opportunity! Build a meet-up application which allows users to find and create events based on their interests!

About


Languages

Language:JavaScript 71.5%Language:HTML 15.6%Language:CSS 13.0%