Documentation-Wiki & README

[kendallm360]

MVP1 - ends 9jul23 MVP2 - will be the last sprint where I am most focused on this. MUST BE deployable by the end of this spriont MVP3 - will mostly be focused on sophia courses and applying UPDATE README table of contents

Mentionables: Although I am a junior I am familiar with.....

• project board with automated workflows
• slogan = Discover, Share, and Bond with Loved Ones with Movie Social
• responsive
• pr template
• Jira for sprint tracking?????
• Semantic HTML with avoidance of div soup
• Accessibility?
• nextauth middleware?
• although this was a solo project I used Projectboard, jira, branch rules, and atomic commits perfect for cherry picking as if I am working with a team
• also wrote documentation along the way in the event someone did join in the future
• use next.js image tags to optimize image rendering

Features to mention:

• login placeholder moves when clicked
• variant for logging in vs signing up
• chevrons flip up and down in the navbar
• navbar changes color on scroll
• error page (gif travolta)

Stretch: Tailwind - takeaway nice but more WET than I like. The time it saves it adds back when i have to make changes.

Approach:

• Authorization first
• Functional programming
• Atomic commits to allow for easy cherry picking in the event this was a collaborative work environment
• Axios for fetching my own db
• async await for restful apis

Technologies:

• Next.Js
• Typescript
• Prisma
• MongoDB/mongoose
• Oauth/bcrypt/nextauth
• axios
• react icons

• useSWR for sessions GSM

  Future:

  • github/wiki docs
  • jest
  • CI/CD
  • clubs
  • mocha/chai
  • apollo
  • graphql
  • vote for which review source is most in line with your opinion (leads to overall opinion of usrbase)
  • show times near me

Commands:

• npx create-next-app --typescript
• npm install -D tailwindcss postcss autoprefixer
• npx tailwindcss init -p
• npm install -D prisma
• npx prisma init
• npm install -D prisma
• npm install @prisma/client
• npx prisma db push (pushes schemas and their respective collections to MongoDB db)
• npm install next-auth
• npm install bcrypt
• npm install --D @types/bcrypt
• npm install axios
• npm install react-icons --save
• npm install @next-auth/prisma-adapter
• npm install swr
• npm i react-slideshow-image (see this for "docs")
• npm install lodash
• npm install -D @types/lodash

PINO:

• npm install pino
• npm install pino-pretty
• import pino
• const logger = pino()

[kendallm360]

search movie axios: ` import axios from 'axios'; const options = { method: 'GET', url: 'https://api.themoviedb.org/3/search/movie', params: {query: 'cb4', year: '1999'}, headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJjZDAwZjgyODdjMjVhMTY0MjFjZTAwMjg4MWU4MDhmZSIsInN1YiI6IjY0YTMxNmE3OGUyMGM1MDBhZTEzMmU3NyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.LE7hXNexC-OfKnrWuNdCsW8CI5EuQ5HZqLVFomxyUCw' } };

axios .request(options) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(error); }); `

[kendallm360]

`const options = { method: 'GET', headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJjZDAwZjgyODdjMjVhMTY0MjFjZTAwMjg4MWU4MDhmZSIsInN1YiI6IjY0YTMxNmE3OGUyMGM1MDBhZTEzMmU3NyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.LE7hXNexC-OfKnrWuNdCsW8CI5EuQ5HZqLVFomxyUCw' } };

fetch('https://api.themoviedb.org/3/search/movie?query=cb4&year=1999', options) .then(response => response.json()) .then(response => console.log(response)) .catch(err => console.error(err));`

[kendallm360]

TRAILERS: THIS ENDPOINT const options = { method: 'GET', headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJjZDAwZjgyODdjMjVhMTY0MjFjZTAwMjg4MWU4MDhmZSIsInN1YiI6IjY0YTMxNmE3OGUyMGM1MDBhZTEzMmU3NyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.LE7hXNexC-OfKnrWuNdCsW8CI5EuQ5HZqLVFomxyUCw' } };

fetch('https://api.themoviedb.org/3/movie/24978/videos', options) .then(response => response.json()) .then(response => console.log(response)) .catch(err => console.error(err));

WILL GIVE results.key="VvZjdok7cNE" which is the end https://www.youtube.com/watch?v=VvZjdok7cNE