Merge pull request Techtonica#1764 from priyaraj7/week-11-project

Week 11 project ideas

projects/pern-contact-list-app.md

@@ -0,0 +1,52 @@
+# Full-Stack PERN Project: Contact List App
+
+### Introduction
+
+You've now learned how to create a full-stack app with a React frontend, Node/Express backend, and Postgres database (PERN). This project is to practice putting it all together by building a fairly simple app from start to finish.
+
+### Instructions/Notes
+
+- For this project, you can reference previous lessons and find your own resources online. This should be good practice finding resources and getting the help you need to make your code work without step-by-step instructions.
+- You must use Express, React, and Postgres. You can choose what other technologies and libraries you want to use as well as part of the project.
+- All code should be your own or _become your own_, i.e. you should understand what it's doing, even if it's a snippet from StackOverflow. If you get an idea from somewhere or someone, please add an attribution note in a comment.
+- **Styling/CSS is not important for this assignment**, but once the behavior is working, please feel free to make it look nice.
+
+### Overview
+
+Let's make a contact list app
+
+#### Backend:
+
+You need to use Postgres and Express to connect your DB.
+Your DB should have a table "contacts" with at least this columns:
+
+- Contact ID
+- Name
+- Email
+- Phone
+- Notes
+
+#### Front-End.
+
+Please make sure that your components in the React app have this distribution.
+![Screenshoot](https://github.com/Yosolita1978/screenshoots/blob/main/week11/lo90b1.jpeg?raw=true)
+
+- Home (App) - Parent
+- contacts - Child - Renders a list with all your contacts.
+- view-contact - child - Renders the info of ONE individual contact
+- create-contact- child - Renders a form for the user to add a new contact
+
+#### Features:
+
+- A list with all your contacts
+- A form so you can submit a new contact
+- A button of "Edit" in front of the name of your contact with the functionality to update the data
+- A click option to see the individual contact detail page
+
+#### Extra Features:
+
+- A delete button to delete an specific contact
+- Error handling
+  - Your form should use HTML input attributes to validate input and make entering data fast and easy
+  - Show a user-visible error message to indicate what's wrong and how the user can fix it
+- A test file to test your form component

projects/pern-game-app.md

@@ -0,0 +1,42 @@
+# Full-Stack PERN Project: Game App
+
+### Introduction
+
+You already know how to build a little game in React. Let's do something similar, but know you can keep track of scores and view the leaderboard.
+Little fun fact: you build your game in week 5! Do you remember week 5?
+
+### Overview
+
+You would have to create a full-stack project following the template from past projects.
+
+In the front-end, your app could be any of these three games:
+
+- Your past react-game project (Feel free to use the same game)
+- Guess my number
+- Tic Tac Toe
+
+In the back-end, your scheme should provide routes/endpoints to:
+
+- Create a new player
+- Update a player's score
+- Remove a player
+- Fetch a list (leaderboard) of top players (ranked by score)
+
+#### Back-end:
+
+You need to use Postgres and Express to connect your DB. Your DB should have a table "players" with at least this columns:
+
+- player ID
+- player name
+- player score
+
+#### Front-end:
+
+Make sure that you have inputs in your front-end to grab the player name
+When the user finishes the game, save the score in your DB
+If the user selected it, show a list with the top 10 scores (ranked by score)
+
+#### Extra Features:
+
+- When the user finishes the game, show them their last score and the new one
+- A test file to test your form component

projects/pern-weather-app.md

@@ -0,0 +1,41 @@
+# Yes, another Weather App
+
+### Introduction
+
+You already have a frontend weather app. Let's reuse that connection with the OpenWeather API and create a simple app.
+Little fun fact: you build this in week 7! Do you remember week 7?
+
+### Overview
+
+You would have to create a full-stack project following the template from past projects.
+In the front-end, your app will display ONE day forecast for the user using the info collected from the OpenWeather API https://openweathermap.org/api
+
+## Backend:
+
+You need to use Postgres and Express to connect your DB. Your DB should have a table "users" with at least this columns:
+
+- Users ID
+- User name
+- Favorite City
+
+## Frontend.
+
+Make sure that when the user searches for a city, that value goes to two places:
+
+- Your API call
+- If the user selected it, to your db as the favorite city for the user
+
+### Features:
+
+- Any button that allows the user to save a city as their favorite
+- A db that store the favorite city of the user
+- A view of one day of the location that the user is searching.
+
+### Extra Features:
+
+- An Update button to update the favorite city from the user
+- Ask the user for an email and register this camp in your DB too
+- Error handling
+  - Your form should use HTML input attributes to validate input and make entering data fast and easy
+  - Show a user-visible error message to indicate what's wrong and how the user can fix it
+- A test file to test your form component