1. copy local client repo and test

Requirements

In order to get a satisfactory score, by the time you present your project, you
must meet the following requirements:

Deployment

Be deployed online, where the rest of the world can access it.

1. Host on your public Github page, not Github Enterprise.
2. Deploy client application on GH pages.
3. Deploy server application on Heroku.

Version Control

Demonstrate using version control by:

1. Sharing your work through a git repository hosted on Github.
2. Making frequent, cohesive commits dating back to the first day
   of the project week.
3. 1 commit on the first day of project week on both repos.
4. At least 1 commit every day during project week (not necessarily on both repos).

Documentation

• front end
• backend
  Produce documentation on Github:

1. Create 2 Github repos (one for your front-end and one for your back-end)
2. Pin both repositories on GitHub as a Popular Repository

Both front-end and back-end repos should include README's with:

1. An explanation of the what the app does and how it works.
2. Complete the repository Description field and Website field with a meaningful sentence description of the application and link to the live URL
   
3. A link to the other repo
4. A link to both deployed sites
5. List of technologies used
6. List unsolved problems which would be fixed in future iterations.
7. Document your planning, process and problem-solving strategy

Your front-end repo's README should also have:

1. Link to wireframes and user stories
2. An embedded screenshot of the app
3. Set up and installation instructions for front end application

Your back-end repo's README should also have

1. Link to Entity Relationship Diagram (ERD).
2. A catalog of routes (paths and methods) that the API expects.
3. Set up and installation instructions for back end application

Auth Specifications

1. Signup with email, password, and password confirmation.
2. Login with email and password.
3. Logout when logged in.
4. Change password with current and new password.
5. Signup and Signin must only be available to not signed in users.
6. Logout and Change password must only be available to signed in users.
7. Give feedback to the user after each action's success or failure.
8. All forms must clear after submit success and user sign-out
   • (Optional) Reset form to initial state on failure

Client Specifications

1. Use a front-end Javascript app to communicate with your API (both read and write) and render data that it receives in the browser.
2. Have semantically clean HTML and CSS
3. User must be able to create a new resource
4. User must be able to update a resource
5. User must be able to delete a resource
6. User must be able to view a single or multiple resource(s)
7. All resource actions that change data must only be available to a signed in user.
8. Give feedback to the user after each action's success or failure.
9. All forms must clear after submit success or failure
10. Protect against Cross-site Scripting

API Specifications

1. Use Express or Django to build an API.
2. Create at least 4 RESTful routes for handling GET, POST, PUT/PATCH, and DELETE requests for a resource other than User.
3. Have at least 1 resource that has a relationship to User
4. Any actions which change data must be authenticated and the data must be "owned" by the user performing the change or a user determined by an access control list

DO NOT!!

Your app must not:

1. Delete your repository at any time or start over.
2. Rely on refreshing the page for any functionality.
3. Have any user-facing bugs.
   • Display non-functional buttons, nor buttons that do not successfully complete a task.
   • Show actions at inappropriate times (example: change password form when a user is not signed in).
   • Forms not clearing at appropriate times (example: sign up form not clearing after success).
4. Use alerts for anything.
5. Display errors or warnings in the console.
6. Display debugging messages in the console.

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].

Express Deployment with Heroku

You've learned a lot about how to build a Node application over the last
few weeks. Now let's 'go public' and share our apps with the world!

Prerequisites

• Express Api
• This guide assumes you have followed
  these installation instructions
  unequivocally.
• Heroku Account and Toolbelt CLI

Objectives

• Create a Heroku app from the command line.
• Push the latest code to Heroku.
• Set up MongoDB Atlas
• Add environment variables
• Share a link to your app.

Deploying to Heroku

Begin inside the root directory of your application (the directory you
just renamed to express-upload-api from express-api-template) deploy a new
application to Heroku:

• Run heroku create in the command line in the root of your Express API to
  create a new (blank) app on Heroku.
• Commit to your local main branch
  (if you do not have a branch named main, you can create one with git checkout -b main)
• Push your latest code to Heroku (git push heroku main)
• Add any addons
  • If using MongoDB you'll need to follow the atlas add on steps
  • If using AWS you'll need to follow the aws credentials steps
• In terminal, run: git push heroku main (should build your site)
• Due to the first line of code in the server.js file, the default
  deployment environment will be production
• You need to set your CLIENT_ORIGIN so that your deployed API will ONLY
  accept requests from the correct domain. IF you're client is deployed on GitHub,
  your ORIGIN will be:
  https://<% github username %>.github.io
• Set your client ORIGIN by:
  heroku config:set CLIENT_ORIGIN="https://<% github username %>.github.io"
• You should have (at least) two config variables set in heroku
  (heroku>settings>config vars): DB_URI and CLIENT_ORIGIN
  • If you are using AWS, you should have two additional config variables.
• Once all of these are set, run in terminal: heroku restart
• Then in terminal, run: heroku open

NOTE: heroku open will open your deployed Express API in the browser. It will most likely be a blank white page that says Cannot GET /. This is expected since you probably did not create a route for the path /. To verify your deployment worked, you can change the path in the URL to match a valid route you did define in your app (e.g. if I have a GET route for /books, I should see some JSON when I add /books to the URL).

A full list of Heroku commands can be accessed by running heroku --help

Share Your App (REQUIRED)

1. Fork and clone this repository.
2. Change into the new directory.
3. Create and checkout a new branch, named response.
4. Delete the contents of deployedUrl.txt with the URL of your
   deployed heroku application.
5. Add, commit, and push your changes.
6. Open a PR on this repository here.

Your pull request description should contain a "fist to five" for comfort and
clarity. Additionally, you should mention the resources you used to help you
complete this guide. For example:

Comfort: 3
Clarity: 3

I used Google and my class notes to help with this exercise.

You may wish to refer to FAQs
related to
forking,
cloning,
and pull requests.

Creating Atlas addon

• Go to https://cloud.mongodb.com/ and sign in
• Since the free-tier of MongoDB Atlas only allows one cluster
  per project, create a new project and a new cluster, selecting the "Free" version
• Once the cluster has been created, click "connect" on the cluster overview
• Setup connection security:
  • For "step 1: Add a connection IP address", select Allow Access From Anywhere
  • Create a user, admin, with a password. Save these credentials
    somewhere safe.
• Choose a connection method:
  • Select "Connect your application"
  • Select "Node.js" as the driver, version 3.6 or later
  • Copy the connection string provided
• In terminal, run heroku config:set DB_URI="<your-connection-string>",
  replacing the <password> with the password you created for the admin user
  and <dbname> with the name of your database.
  • Ex: heroku config:set DB_URI="mongodb+srv://admin:[email protected]/atlas_db_test?retryWrites=true&w=majority"
  • NOTE: You don't have a database at this point yet, but MongoDB will
    create it as soon as you use your application to create data. So, in the
    example above, the atlas_db_test database will not exist until the first user
    is created via a sign-up.

Finish up the final deployment steps, then test your app to make sure it worked.

return to Deploying Heroku

Add AWS credentials

• Make sure you have generated your AWS secrets
  and have them in your local .env file. Things should work locally when interacting
  with AWS.
• Remember, your .env file contains secret credentials and should NOT be
  committed to git or pushed to GitHub. So, to deploy your app to another server,
  we have to manually set up the .env for that server, by hand.
• On Heroku, this is done via the heroku config:set command from the command line (or via the Heroku web dashboard):
  • heroku config:set SOME_KEY=some value, just like we did when we first deployed our express app

return to Deploying Heroku

WARNING: Ephemeral Filesystem

One serious limitation of Heroku is that it provides an 'ephemeral filesystem';
in other words, if you try to save a new file inside the repo (e.g. an uploaded
image file), it will disappear when your app is restarted or redeployed.

As an example, try running the following commands:

heroku run bash
touch happy.txt; echo 'is happy' > happy.txt
cat happy.txt

Then, hit Ctrl-D to get out of heroku bash shell. If you re-open the shell and
run ls -l, happy.txt will be missing!

The typical workaround is to save files in cloud storage such as Amazon
S3.

Troubleshooting

• First step upon encountering an issue should be to run heroku logs to
  read the logs of your deployed heroku server
• Heroku Addons
• Previous Issues
• If you are getting a CORS error and the CLIENT_ORIGIN is correct, ensure the
  DB_URI is set successfully with the value that MongoDB Atlas provides for your cluster.

Additional Resources

• Heroku Command Line

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or
   alternative licensing, please contact [email protected].

I console log the code and it scrambles but when I put it on it on the component it comes out like nothing happened.

I tried to create another component and bring the result in but exact same thing happened.

https://git.generalassemb.ly/ga-wdi-boston/capstone-project/issues/3039#issue-342663

• email
• slack
  hello, Friends of GA, this is a reminder that we will have a year-end party zoom party on 28th at 7 pm EST for sei-der-donuts class as planned at ZOOM LINk

Here is the schedule
7 pm meeting room open
7: 30 pm Intro. Sharing Game links, Glow links by Jehee, open chat.
8:00 possible special performance
8:30 Kahoot survey
9:00 official end but open room for more.

prepare - bring drinks.

https://jeheechoi.github.io/Glow-client/#/home
SAVE THE DATE Monday, Dec 28th, 7 pm EST
hey guy, what a year!
Elijah and I decided to throw a year-end party zoom party on 28th at 7 pm EST for sei-der-donuts class.
Activities are... drink of your choice, catch up with homework, play games, signing cards and chat. Zoom link (not GA affiliated). I am open to ideas and still planning stage as we are working on the capstone project. Everyone's invited. (edited)

1.) Among us - it's a really popular game right now but everyone has to download the app on their phones (it's the only way to play free).. the max number of people per game is 10 so you can split up into groups: http://www.innersloth.com/gameAmongUs.php

2.) Pictionary - what we just played today! I think max capacity is 8: https://skribbl.io/

3.) Spyfall - a game with one spy. The spy wants to guess where all the other players are, the players want to guess who the spy is. You make your own questions to interrogate each other: https://www.spyfall.app/

4.) Codenames - game of cards where a team rep gives their team one word, based on the word, the team has to flip over all the cards that match the word
https://codenames.game/

5.) Family Feud (attached below) - You'll have to put in your own questions and allow macros so that it keeps score. There are instructions for how to add questions towards the end of the slide

Documentation

Produce documentation on Github:

1. Create 2 Github repos (one for your front-end and one for your back-end)
2. Pin both repositories on GitHub as a Popular Repository

Both front-end and back-end repos should include README's with:

1. An explanation of the what the app does and how it works.
2. Complete the repository Description field and Website field with a meaningful sentence description of the application and link to the live URL
   
3. A link to the other repo
4. A link to both deployed sites
5. List of technologies used
6. List unsolved problems which would be fixed in future iterations.
7. Document your planning, process and problem-solving strategy

Your front-end repo's README should also have:

1. Link to wireframes and user stories
2. An embedded screenshot of the app
3. Set up and installation instructions for front end application

Your back-end repo's README should also have

1. Link to Entity Relationship Diagram (ERD).
2. A catalog of routes (paths and methods) that the API expects.
3. Set up and installation instructions for back end application

Program Roadmap

Software Engineering Immersive is split into 4 main units. Below you'll find a high
level breakdown of what you can expect in each unit:

Unit 1: Web Development Fundamentals

• Learn programming fundamentals with JavaScript and practice using basic
  development tools.
• Use HTML and CSS to construct a single page application, JavaScript
  and jQuery to interact with them through the DOM, and AJAX to communicate
  with a backend API.
• Project 1 : Build a front end application utilizing a backend API.

Unit 2: Express & MongoDB

• Explore building a backend API in JavaScript using Node.js and Express.
• Explore a non-relational database, MongoDB, integrate it into Express
  using the Mongoose Object-Document Mapper, and use Express middleware to add
  new features to an Express application.
• Project 2 : Build your first full stack application.

Unit 3: React

• Learn about a client side JavaScript framework, React, and learn how to add
  it on top of a backend API.
• Project 3 : Build a full stack application using React with your team.

Unit 4: CS, Python & Django

• Revisit programming fundamentals with Python and take our first steps into Django.
• Learn about using SQL databases and persisting data in Django.
• Practice building Django backend APIs that integrate into client side applications.
• Project 4 : Build a full stack application using technologies learned in class.

Getting Started

Most importantly, remember to go slowly and be methodical. That means you
should be testing your changes in-browser as you write each line or so of code.
Always be commiting. Deploy early and often.

Here's a rough sketch of what you should do and in what order:

Planning

1. Review project-practice
2. Create User Stories
3. Review project-planning-wireframes-study
4. Create Wire Frames
5. Review project-modeling-lab
6. Create ERD

Set Up

API

1. Download Express API Template or Download Django API Template
2. Create a Github Repository
3. Deploy to Heroku with Express or Deploy to Heroku with Django

Client

1. Download Browser Template or Download React Auth Template
2. Create a Github Repository
3. Deploy to Github Pages with Browser Template or Deploy to Github Pages with React Auth Template

API

1. Review express-api or django-auth
2. Create your resource and end points
3. Test your resource's end points with curl scripts
4. Add the relationship to a User
5. Add User ownership to resource controller

Client

1. Review jquery-ajax-token-auth or react-auth
2. Sign Up (curl then web app)
3. Sign In (curl then web app)
4. Change Password (curl then web app)
5. Sign Out (curl then web page)
6. All API calls have success or failure messages
7. Review jquery-ajax-crud or react-crud
8. Create resource (curl then web app)
9. Get all of their owned resources (curl then web app)
10. Delete single resource (curl then web app)
11. Update single resource (curl then web app)

Final Touches

1. README
2. Troubleshoot/Debug
3. Style