mern stack portfolio

Create and export Express routes, wire them into the server, and implement get, post, and update operations for about and specific user endpoints, then test with Postman.

Build and organize your mern stack portfolio by creating a controllers folder, defining get, post, update, and delete endpoints for about data, and refactoring code for elegance.

Sign in to MongoDB Atlas with Google, create a project, choose Google Cloud in Belgium, configure network and database access, and connect your application to a new MongoDB schema.

Create an about schema with a required string field using mongoose, define the about model as aboutSchema, and export it via module.exports as about for MongoDB interactions.

Learn to fetch all data and post new items in a mern stack portfolio using get and post requests, with data saved in Mongo and reflected in the portfolio.

Discover how to get a specific item by id, update it with put, and delete data in a mern stack portfolio, using database-backed items and dynamic updates.

Explore building the education route in a mern stack portfolio by adding education models, controllers, and routes, performing create, read, update, and delete operations modeled after the about route.

Create and wire an experience model in a MERN stack portfolio, define the experience schema, set up the experience route, and implement update, get, and delete operations.

Explore creating routes and a register flow in a mern stack portfolio, including a user model, registration with verification codes, password hashing, and login handling.

Create a middleware folder and implement token verification to authorize users in a MERN stack portfolio. Return unauthorized responses for invalid tokens and handle authorization checks.

Create an upload route in Express, configure Cloudinary integration, obtain API key, cloud name, and secret, and wire the Cloudinary setup into the server to handle image uploads.

Create an image upload flow in a MERN stack portfolio app, validating file size and format, setting the upload destination, and handling errors with status codes.

Create components and routes for a project-based portfolio, organizing sections like education, projects, experience, and contact in a single-page layout with import-driven navigation.

Create a navbar component for a mern stack portfolio using react router links to home, about, and contact, integrate images, and apply basic layout styles.

Develop a responsive navbar component by using css media queries to adjust borders, font sizes, link visibility, and background for a polished mobile-to-desktop experience.

Implement a navbar component by managing open and close states with useState, applying act for updates, and ensuring links close the menu when toggled or selected.

Implement an animated navbar button transition and debug its behavior, adjusting bars, margins, and background to achieve a smooth, responsive navigation effect.

Apply responsive header styling for a Mern stack portfolio by configuring font sizes, colors, borders, and shadows, and arranging content with display flex and justify-content space-between across breakpoints.

Create the about component with html and css, set margins to zero, adjust the title font size, and finalize the education section for the mern stack portfolio.

Build the education component with html-css, configuring layout, margins, sizing, and color, and prepare dynamic map-based rendering for the portfolio site.

Build a projects component for a mern stack portfolio using html and css, import assets, render a single project, and apply flexbox layout with checks and transitions.

Learn to build and style an experience component with HTML and CSS in a MERN stack portfolio, shaping layout with backgrounds, cells, and reusable classes.

Build a contact component html for the mern stack portfolio, implementing a form with name, email, and message fields, a text area, placeholder, and a send action.

Style the Mern stack portfolio contact component css, set up the contact form, and implement the page background and body layout for the contact section.

Build an html footer component for a mern stack portfolio in a React project, wiring social links, contact details, and Facebook media references for a complete, connected footer.

Develop and refine the footer component css for the mern stack portfolio by configuring layout with display flex, adjusting font sizes, colors, and media display for responsive alignment.

Design and implement the register component in a mern stack portfolio, wiring up name, email, and password fields, and transition from static UI to dynamic backend with database integration.

Build and wire admin components to assemble a functional portfolio admin panel, including education, projects, and experience sections, with structured UI import and export patterns.

Develop and style the admin component in the mern stack portfolio by configuring padding, borders, font sizes, text areas, and reusable classes for consistent, responsive user interface elements.

Explore the education admin component css within the mern stack portfolio, covering education component, project checks, and media screen considerations with a focus on ranges and percent values.

Build a React-based project admin component in HTML, detailing forms for id, name, description, time, and image, with item lists and a single project view.

Develop and style a project admin component for a mern stack portfolio, implementing image upload previews and css layout using relative and absolute positioning, margins, and border radius.

Finalize the admin experience component for the mern stack portfolio by wiring icons, education and experience entries, and navigation links to build the portfolio’s experience section.

Learn to edit the about component in a MERN stack portfolio. Update the about data, set correct paths, apply class names, and add a placeholder link to complete the UI.

Finish and finalize the experience component for the mern stack portfolio, then implement its functionalities and plan moving from one component to another to streamline app flow.

Learn to manage state with the context api, optionally using Redux, by building a global context and a data provider that uses axios to fetch data for all components.

Learn to fetch about data in a MERN stack app using axios, useEffect, and context, then map the results and render dynamic items from the backend database.

Build an admin panel that fetches about data with axios, manages it via state and global context, and renders the data dynamically in a UI.

Implement an admin submit-onchange flow in a MERN portfolio app by wiring textarea inputs to an onchange handler and logging changes. Post via axios and prevent page reload.

Learn to fetch and update about data for a specific idea in a React app using axios, with useEffect loading data and on-change handlers updating state.

Build the education component to fetch education data using Axios within a global context, manage state, and render education items in the UI.

Fetch education data in a React app using axios and useEffect to build a higher education data display from the database.

Implement delete and add data for education records in the mern stack portfolio, following the same workflow as the about section, including submitting education data and managing unique ids.

update the admin education with a fetch-update flow in the mern stack portfolio, handling on change, specific date values, and post-publication messages to confirm item updates.

Build the experience component with dynamic data fetching, replacing static data, and wiring useState and global context to map experiences to the UI, with backend integration for MERN stack portfolio.

Learn to build and manage experience data in a MERN stack portfolio, implementing fetch, submit, and delete operations with axios.

Learn to fetch and edit experience data in a mern stack portfolio, using axios calls, on-change handlers, and update and delete operations for experiences and projects.

Learn to build a mern stack portfolio admin that fetches and deletes project data, loads dynamic items with images and descriptions, and syncs deletions to the backend using axios.

This lecture shows how to fetch data from global context to render a single project, incorporate its images, and implement a message form for interaction.

Create a dynamic contact form in a mern stack portfolio using Axios to post name, email, and message; manage inputs and reset after submission.

Build the register component in a MERN app by posting user data (username, email, password) with axios and aligning front-end inputs to the backend user model.

Deploy your mern stack portfolio to Heroku by configuring the server, installing the Heroku cli, logging in, pushing code, and building the production app to run online.

Deploy a full-stack MERN portfolio project to Heroku, push changes, and test frontend and backend functionality while configuring global context and login and logout, and reviewing deployment previews.