Mern Flashcards App

Live Demo: https://ecstatic-allen-917012.netlify.app/

Frontend :

Setup: use npm install followed by npm start. Runs on localhost:3000

React
react-bootstrap for Navbar, Buttons, and the Question Choices

Backend :

Setup: npm install followed by npm start (or npm run server - will run with nodemon). Runs on localhost:8000

passport
mongodb
node
express
OAuth with google

To-Do :

- Style Homepage add login / signin

- Add user profile and redirect to profile after auth.

- Show/Hide Flashcards unless user is signed in.

- Backend - I don't think current method of getting data from backend is most efficient - look for alternatives.

- Flash card groups (maybe)

- When flashcard is clicked it changes color (I have no idea how to do this)

flashcard groups:

~~Mern~~
~~react~~
~~redux~~
~~node~~
~~express~~

Add:

Google auth Schema information
- googleId
- imageUrl
- email
- name
- givenName
- familyName

Research:

~~why it won't render in safari~~
~~3rd party sign-in auth~~

Miscellaneous :

following files were changed to add api to routes:

Backend: server.js
frontend: authActions.js
- ReactCards.js
- Flashcards.js
- _redirects

frontend: https://github.com/kaloraat/mern-auth-client

backend: https://github.com/kaloraat/metn-auth-api

https://github.com/kaloraat/mern-auth-bundle

social login references: https://aaryanadil.com/react-social-login-tutorial-google-facebook-and-twitter-oauth2

https://jasonwatmore.com/post/2020/10/25/react-facebook-login-tutorial-example

https://github.com/kaloraat/react-node-next-multi-user-blogging-platform/tree/master/120%20login%20with%20google%20backend

Need to set up a session in the google authentication component