Full-Stack Web Developer Bootcamp with Real Projects

Install and set up your tools for the course: code editor from code.visualstudio.com, node.js, and git bash, then use node to build the server side and start the search engine.

Build a node and express backend by initializing npm, installing express, and creating server.js. Start a home route and run the server on port 3000 for localhost testing.

Install and configure express-handlebars as the view engine, set up layouts and a main template, and render a home page for the book finder app using the render method.

Learn to set up Express with handlebars templates, create routes for home, about, and contact, and auto reloading the server using nodemon to streamline development.

Set up express.static to serve a public folder, create a public/css file to style the page, and link the stylesheet in the handlebars layout to apply colors.

Learn to style web pages with CSS by selecting elements by tag name, id, and class, and applying colors and typography. See live updates on refresh.

Learn to use bootstrap to build responsive pages by including the cdn in head, and implement a bootstrap nav bar with a search that fetches a book from Google Books.

Learn to integrate bootstrap for a dark navigation, set up a public folder, and use jQuery to perform ajax requests to Google API. Verify DOM by changing a paragraph color.

Learn to add interactive search with a JavaScript find book function that updates a results container by manipulating the DOM when a user clicks the search button.

Learn to manipulate the DOM with JavaScript by selecting elements, retrieving input values, and displaying results in a div when a button is clicked.

Push your project to GitHub by initializing a repository, applying .gitignore, and committing source code, while preparing for ajax requests to the Google API.

Learn to use jQuery ajax to fetch data from the Google Books API, process the json results, and handle items and volume info like authors and image links.

Learn to fetch book data via ajax and display results with JavaScript and jQuery by creating image elements from image links, iterating over items, and appending thumbnails to the page.

Explore using a for loop in JavaScript to iterate over a books array, display all related images, and dynamically render multiple items from data.

Learn to dynamically render a list of books by creating DOM elements for images and Bootstrap media layouts, display titles from the book data, and structure with separators.

Explore styling with CSS and Bootstrap by implementing the Bootstrap media object to display book images and titles, and adjust layout with a fixed-top navigation.

Learn to display book country, author, and description by extracting data from a books object and dynamically creating and appending elements with JavaScript, while keeping the page responsive.

update the book display to show a single author by removing array brackets, then push code changes to GitHub and refresh the project page to reflect updates.

Fetch and display the book's published year and publisher from the data object by accessing volumeInfo. Create and append dom elements to show details and format output with string concatenation.

Style a page with CSS to display Google Books data: fetch book info via the Google Books API, show previews and view more links, and center headers.

Push changes to GitHub after updating styles and data display, using JavaScript and AJAX to request and render data, and review the project repository.

deploy your book search application to heroku using the heroku cli, create the app, push your code, and open the live app on the internet.

Set up the development environment to build a social media application, using a server-side JavaScript framework with Express, MongoDB, and Stripe for login via Facebook, Google, and Instagram.

Initialize the social media app with npm, install express, and create an Express server on port 3000 that serves the home route and returns a welcome message.

Install nodemon as a development dependency and use it to automatically restart an Express server when files change, while defining a simple /about route.

Learn to set up express handlebars as the view engine and render home page templates with a default main layout using res.render.

Set up an express static folder to serve public assets (css, images, js), link them to handlebars templates, and enable DOM manipulation on load.

Learn how to integrate bootstrap in an express project using the CDN, apply a responsive, mobile-friendly navigation bar with handlebars partials, and render pages like home and about.

Create a remote database with MongoDB, set up a cluster, configure access, and obtain the connection string to connect your app via Mongoose.

Connect a node server to a remote Mongo database with Mongoose, set up production port via environment variables, and push the project to GitHub while ignoring sensitive files.

Set up a social media UI with bootstrap containers, implement sign-up buttons for Facebook, Google, and Instagram, and add font awesome icons while managing version control and local server development.

Master UI design by styling social media buttons for Facebook, Google, and Instagram using precise class selectors, colors, hover states, and removing underlines. Prepare for data collection and future routing.

Create a mongoose user model by defining a user schema and using model to build collection, with fields for full name, email, image, and social data (facebook, google, instagram) defaults.

Set up Google authentication by creating a Google developers project, enabling the API, and generating a Google client ID and secret to power Passport Google authentication for the bootcamp project.

implement Google authentication with passport using the Google strategy, configure express session and parsers, and load Google client ID and secret from a keys file for secure sign-in.

Configure passport with the google strategy to authenticate users in an express app. Use google client id and secret and routes to handle login and callback, then display google profile.

Store Google profile data in a MongoDB collection via a Mongoose model, check for existing user by Google id, and save new user with full name and image.

Learn to save Google-authenticated user data to a remote database by updating the user collection with first name, last name, full name, email, and image.

Handle promise rejection during Google sign-in with passport, fix the callback flow to redirect to the profile page, and prep to display the user's profile picture and full name.

Fetches the current user data from the MongoDB collection and renders the user profile page by passing a user object (full name, email, and image) to the Handlebars template.

Display a profile page with the profile picture, full name, and email, using a responsive bootstrap layout and code to trim image URL with substring and index to original size.

Implement a logout route in an Express and Handlebars app, render a logout button conditionally based on user login, and redirect to the home page after logout.

Push your local project changes to GitHub to update the social media app repository, review the source code, and verify assets and authentication files in the terminal.

Configure production and development keys for a full-stack app, set environment variables, and prepare deployment to Heroku, including separate Google client ID and secret and safeguarding keys from GitHub.

Deploy your application to Heroku using the Heroku CLI, create a Heroku app, and push all source code to complete deployment.

Configure production environment variables on heroku, replacing development keys with mongo and the google client id and secret for the live app.

Set up Facebook login with passport-facebook in a full-stack project by installing the module, registering a Facebook app, and wiring passport authentication with serialize user and express session.

Learn to implement Facebook authentication in a real project using passport-facebook, configure Google and Facebook keys, handle the callback, and display user profile data.

Learn how to retrieve Facebook users' profile information during login by configuring Passport.js with the Facebook strategy and requested profile fields (id, name, photos, emails).

Sign in with Facebook using Passport and store the retrieved display name, first and last name, email, and photos into a MongoDB user collection, including a dynamic profile picture URL.

Set up production Facebook signup by creating a production app in the Facebook developer console, configuring domain and callback, and wiring environment variables, then deploy to Heroku.

Design a client-side user profile using a bootstrap card and handlebars template to display the user's image, full name, and email by binding the user object.

Push and deploy your updated profile page changes to Heroku, verify local versus live differences, and test sign-in options such as Google and Facebook.

Push all code changes from the local project to GitHub using the CLI. Verify updates by visiting the repository link and reviewing the profile and handlebars files.

Learn to authenticate users with Instagram using passport-instagram, including installing the module, configuring keys, and serializing the user into a browser session with passport.

Register the app on the Instagram developers page to obtain the client id and client secret, store them in a keys file, and configure the redirect uri to localhost:3000.

Integrate Instagram login with the passport Instagram strategy, manage development credentials, and implement a callback to receive and log the Instagram profile data for later database storage.

Authenticate with Instagram, fetch profile data, and store or update the user in the database, including full name and profile picture, extracting first and last names from the display name.

Render the profile using handlebars conditionals to display the email or an email form, then handle post /email to update the user and redirect to profile.

Learn how to set up instagram authentication for production by registering an instagram app, configuring production environment variables, and deploying changes to heroku so users can sign in with instagram.

Implement an authentication guard to protect the profile route by redirecting unauthenticated users to home, and expose a helper to verify login before accessing profile.

Protect routes by checking authentication and redirecting to the profile page for logged-in users. Display the home page with Google, Facebook, and Instagram sign-in options for guests.

Push the new authentication updates and helpers from the home handlebars to Heroku, redeploy the app, and require sign-in to access the profile page.

Add a phone number to the user profile by updating the user collection and rendering the new data on the profile page using a bootstrap form and a post route.

Update and display user location in a full-stack app: show a location icon when available or render a form to submit location, then save changes and redirect to the profile.

Push app updates to Heroku after adding location and phone features, log in with Google or Instagram, and switch between development and production databases.

Add required attributes to profile form inputs to prevent empty submissions, ensuring phone number and location data are saved only when provided.

Update the navigation bar with a users icon, add a /users route to fetch all users from the collection, and render them in a bootstrap card layout.

Refine the user page UI by setting a three-column Bootstrap grid, placing each user in the row with bottom margins, and add icons linking to the user profile page.

Learn to implement a fixed bootstrap footer in a handlebars layout, create a footer partial, and wire it into the main layout, with profile, post, and user list interactions.

Implement conditional rendering in the footer to show profile and post icons only when a user is logged in, routing to the users page via Handlebars templates.

Display each user's location in a handlebars list by injecting data with double curly braces, then style by id and push changes to Heroku and GitHub.

Display user profiles by clicking a link, fetch the user by id with Express get /user/:id, and render a Handlebars user template showing the full name and image.

Build a user profile interface using bootstrap cards to display a user's image, name, and location, and link to their profile page with posts to come.

Create a post model with a Mongoose schema that includes title and body, links posts to users, and supports comments with commenter references and timestamps.

Add and manage post collection properties, including title, body, privacy, and comments, using a Bootstrap form and Handlebars templates, with authentication checks and routes to display posts.

Learn how to submit a forum form by wiring inputs for title, body, and visibility, and posting to /save_post to capture the data from the request body.

Save a post to mongodb collection by parsing the request body with body-parser, building a post object with title and body, and a comments flag based on a comments property.

Display public posts from the database by populating user data and sorting by descending date. Render posts with a handlebars template and bootstrap media objects, enforcing login to view.

Authenticate the user and display only public posts on the public posts page, styling posts with profile pictures and dates while listing newest posts first.

Display all posters belonging to the current user on the profile page, including public and private posts, by loading posts from the post collection using the user id.

Add an edit icon to each post on the user profile, enabling edits to posters. Use Font Awesome and pass the post ID to the edit route.

Implement post editing in a full-stack app by using method override, routing to an edit post page, and rendering an edit template with the post data.

Learn how to edit posts with a put request, locate the post by id, update title, body, and comments, save changes to the database, and redirect to the profile page.

Edit posts and display them in descending order on profile and public views, then push changes to Heroku and GitHub to deploy updates.

Add a delete button and icon to remove posts, wiring a form submission to a delete route in Express, and redirecting to the profile after deletion.

Enable comments by showing a comment icon on posts that allow them, render a Bootstrap form, and post comments with the post id to the server.

Learn to store and display comments on posts by handling comment submissions, creating and saving new comments with user data, and rendering populated comments with Bootstrap media.

Display a user profile page by routing to /user/:id and rendering a single user’s image and details. Show first name, last name, location, and email, with display for missing location.

Display all public posts for a user by clicking their full name, using a get route to fetch public posts and render them with a show user posts handlebars template.

Deploy changes to Heroku while building a responsive bootstrap-based social feed with public posts, user profiles, and comments.

Set up payments with Stripe Checkout, create a publishable and secret key, test in tasting mode, charge users per post, and prepare for live payments.

Learn to integrate stripe payments in a full-stack app by using publishable and secret keys, development versus production configs, a five-dollar post fee, and revealing the forum after payment.

Display a payment form to accept payments for posts, render the Stripe publishable key from the keys file into the payment template, and simulate a successful payment.

Install the Stripe module, configure the Stripe publishable key, and set up a post route to process payment data, then create a customer and charge them using Stripe.

Discover how to charge customers with Stripe by creating a customer from email and token, processing a five-dollar post fee, and showing a success page.

Configure Stripe keys for production and development by updating publishable and secret keys in config and Heroku, enable/exit testing mode, and deploy to enable live payments.

Set up Stripe environment variables for testing and production, integrate payments, and style the UI with Bootstrap grid and responsive css to display users, posts, and a green success message.

Deploy changes to Heroku and update the live app, including login, profile pages, and post management with public/private visibility, edits, deletions, and paid posting.

Implement access control by requiring login for posting, editing, deleting, and viewing private posters, while managing public posts and user profiles with authentication checks.

Learn how to buy a domain, configure DNS to point to a Heroku app, and set up Google, Facebook, and Instagram OAuth callbacks for a live website.