b-45/techtalks

Discover presentations about technology

---

techtalks is a platform for users to share and discover highly engaging technology presentations.

visit the project here:

First click and load server - Graphql Backend

Then click here to interact with frontend app - Vue frontend

Commits

---

Backend

• install dependencies
• create server.js file
• connect to mongoDB cluster on Atlas
• create [users, posts] models for MONGODB database
  • create user schema
  • create posts schema
• create typeDefs file & graphql schema for apollo server
• create a dedicated file for resolvers & import into server file
• create signupUser mutation and resolver (excludes JWT Token)
• create addPost mutation and resolver
• create getPosts mutation and resolver User Authentication (JWT Tokens)
• Hash passwords saved to database
• create signinUser mutation and resolver
• create JWT tokens to authenticate user signins
• create getCurrentUser & verify JWT token in server
• redirect user to home page after signing in
• create addPost form mutation
• create infinite scroll posts query & resolver
• Re-create data model for mongodb and graphql types, utilize ytdl-getinfo to extract metadata from youtube url
• create fetchMore query to to add more post
• format post titles to titlecase pre save to mongodb
• query video post from backend using postId
• create likePost & unlikePost mutation and resolver for post component
• implement search posts query and resolver
• deploy application with zeit now

Frontend

• create & integrate frontend (Vue.js) with backend
  • configure babel, vue router, vue store
  • install tailwind-css
  • remove default component files and views
  • install vue-fontawesome
• create Navbar
  • add hover background on navigation links
• create header-title in home component
  • add css text shake animation to title header
• integrate apollo-boost and vue-apollo for frontend queries
  • test apollo query from frontend
• create dynamic variables to query serve from frontend
  • create SIGNIN_USER mutation
  • create SIGNUP_USER mutation
• add routes & forms for user signin and signup pages
  • modify forms and add css styling
• create action in store to manage user signins (passed test - return token to console) Navigations bar state changes
• add profile page
• add logic to change items relevant to user based on authentication state
• add signout button to navigation bar
• create logic to de-authenticate user when signed in
• protect routes that requires authentication and clear token when user sign in
  • protect create post route that requires authentication
• setup alert for graphql errors when authentication fails/ install element UI
• setup validation rules for signin form
• show user notification when signed in
• show user error notification when token expires
• create post user interface
• create a video post route and component
• build video post in post component
• implement logic to toggle like/unlike and add post to user favorites
• create animated badge to notify when user likes post
• implement search result handler and UI

• implement loading spinner on getPost