Build with Svelte, Deploy with Netlify. Awesome together!

Install Node.js and a code editor, sign up for Netlify, GitHub, and MongoDB Atlas, then install Svelte and Netlify client and set up a Flip database with a Project collection.

Set up a svelte project with vite using the flip-app template and install axios, bcrypt, dotenv, json web token, mongodb, and svelte routing.

Install the Netlify client, edit netlify.toml for the dist folder and ports, and deploy with netlify sites create and npm run build to a draft URL.

Set up a complete Svelte project folder structure, including assets, back end, components, pages, and stores, with a checklist to verify fonts and routing configurations.

Preview the checkpoint 1 for the course app, outlining app structure, stores, navigation, Netlify deployment, data flow, and the emphasis on exercises to reinforce learning.

Create app.svelte by wiring pages (login, projects, project update, project template) with nav, sidebar, and alert, and define routes (home, projects, project/:id, login, project update/:id, easy flip/:id) using svelte routing.

Create basic svelte components for login, home, and projects, add a project template and update page, and set up navigation with nav, sidebar, and alert, then test in the terminal.

Create a reactive svelte store using writable to manage alerts and the sidebar with toggle functions. Access data in components using the $ prefix.

Build the home page with home.svelte by adding a header, banner, and demo text. Remove the navigation component to show a cleaner layout and svelte's route controls.

Learn responsive navigation in svelte by swapping between horizontal top nav for wide screens and vertical sidebar for small screens, using a reactive screen width and an app store toggle.

Explore vertical navigation in a Svelte app for small screens by importing link and app store, creating a v component, and toggling the sidebar with a button.

Build a sidebar for smaller screens by exporting a links array from links.js and rendering each link. Include a close button, a logo, and a login/logout marker.

Build a horizontal navigation in Svelte with a nav container, looped links, and a clickable home logo plus a login/logout marker. Make it responsive to a hamburger menu under 900px.

Set up MongoDB Atlas and Compass, create an env file with the connection string, database flip, and collection projects, then prepare for using Netlify serverless functions.

Learn to implement a Netlify serverless function with an async handler that returns a status 200 and a body, connects to MongoDB, and fetches project data.

Create a db-helper.js using the MongoDB client and dotenv to configure the database name and uri from env files, exposing users and projects collections for Netlify functions.

Create a Netlify serverless function and an API getProjects to fetch projects using fetch, not axios. Initialize an empty projects array, await the response, parse JSON, and return the data.

Create a projects.js store in svelte by initializing a writable array, fetching projects via a Netlify API call, updating the store, then exporting and subscribing to it.

Build a Svelte exercise that creates a project route in pages folder, imports the Projects component, connects to a project store, and renders a list with a new project button.

Build a dynamic Svelte projects panel by looping a projects store to show name, location, status, and image. Understand the Netlify data flow and env setup.

Troubleshoot by reviewing code against checkpoints with zip sources and Netlify folders, inspecting console and terminal errors, restarting the dev server, and validating MongoDB Atlas env credentials.

Create a reusable project item component in svelte, exporting a project prop and wiring in image, details, and like buttons to render in projects and support navigation to project id.

Build a Svelte project details view by exporting id, using the project store and find to select the matching item, and binding a reactive project.

Checkpoint 4 introduces the project start zip and templates (project item dot txt and project template txt) for exercises and previews the next section on user store and local storage.

learn to deploy a Svelte app with Netlify, generate a live draft URL, and manage environment variables to connect to a MongoDB database for client previews.

Combine a Svelte writable user store with browser local storage to persist login data. Implement get item, set item, JSON parse, and logout to clear storage.

Implement a Netlify function for register user that checks for users, hashes passwords with bcrypt, and stores the user in MongoDB. Generate a JWT and return a status and body.

Builds a register user backend API using a Netlify function, posting email, password, and username, and updates the user store and local storage.

Implement a login user function in Netlify and backend by copying the register flow, verifying user exists, comparing passwords with bcrypt, and issuing a token using the existing user ID.

Implement a Netlify loginUser.js function with an async handler to validate email, verify password via Crypt Compare, generate a JWT token, and return status codes.

Implement the backend login flow by creating a loginUser function that posts email and password to the Netlify backend, then updates local storage and the user store.

Create a login component that toggles between login and register, with a form for email, password, and optional username, and a script to import app store and backend functions.

Create a svelte login and register component that uses app store to handle email, password, and username. Toggle member status, invoke login or register, and navigate to projects on success.

Build the login markup in svelte with a form, onsubmit handler, email and password inputs, and a conditional username for new members, using the login.txt template.

Build a login form in svelte markup, toggle between sign in and register with is member, bind email, password, and username, and disable submit until all fields are filled.

Implement logio.svelte to determine user login status and toggle actions: reset logout link, navigate home, clear storage, and close sidebar for logged-in users; switch to login link for logged-out users.

Explore how logio.svelte uses a user store and jwt check to render login/logout links, wire navigation with the app store, and manage the sidebar in Svelte.

Test login and register flows in a netlify functions-backed svelte app, verify user creation and login, and confirm local storage stores user id and token with a jwt.

Learn to implement create, read, update, and delete for projects using Netlify functions, following a back-end to front-end data flow with API, store, and components.

Learn how to implement an addProject Netlify function by reusing get projects code, inserting a project in the database, and returning the inserted id with error handling.

Update project logic with Netlify functions by importing and converting MongoDB object IDs. Return the original ID after updating the document with proper error handling.

Create delProjects.js in the Netlify functions folder, copy the project code using the object id, and replace the original id line with deleteOne to finish this Netlify function.

Develop and deploy delete functionality for projects in Netlify functions by converting the provided id to an object, deleting from the projects collection, and returning the status code and body.

Learn how to implement an addProject api function in backend api js using axios to post data to netlify functions, with proper options, headers, and error handling.

Export an update project function in api.js, sending a put request to the Netlify update project endpoint with an ID, project data, and user token.

Update a specific project through a netlify function using a put request with the project id, project data, and user token; handle success and error responses.

Create and export a function called Del Proj in API.js that uses a delete request to remove a Netlify Dail project by id and user token, with no data payload.

Finish the delete project api function delProj in api.js using the project id and user token with the delete method, and prepare for the Project Store.

Add, update, and delete projects asynchronously by calling the API with a user token, then refresh the project store using add, update, and delete functions.

Build a reusable project update component in Svelte to add, edit, and delete projects, populating fields on edit and connecting to the backend via Netlify functions and store calls.

Explore the project update script in Svelte, handling add and edit with a project id, a store, and a data payload. Learn form validation, delete, and navigate back to projects.

Explore building a modal project update form in svelte with validated inputs, a guiding template, on submit handling, and cancel, save, and edit/delete controls.

Learn to build a project update markup in a modal form, wire up form submit, and implement field validation with touched states and conditional save and delete actions.

Explore components handling add, edit, and delete data flow, implement project update routes, guard add with user store and JWT, and enforce owner-based edit permissions via inline on-click navigation.

Test your app by validating code against the end of the section, fix API.js and Project Update issues, then log in and add a new project to verify MongoDB Atlas.

Debug failing tests by checking the checkpoint, red squiggly lines, and console inspection. Restart the server, use console logs, and post precise questions with your code on Google or StackOverflow.

Demonstrates editing and deleting a project via a modal, validating changes in the user interface and MongoDB, and implementing add, update, and delete operations with Netlify serverless functions and Axios.

Fix Netlify addProject and projects.js addProj by returning the new id from API.js and storing it with the project data, preventing edit errors after adding a project; check the checkpoint.

Advance your app with a client call to confirm progress, implement a filter so users see their own projects, and enhance interactivity with a like button, alerts, and Svelte transitions.

Create a Svelte project filter component with two buttons that use createEventDispatcher to emit a filter event with payloads 0 or 1, signaling the parent component.

Extend a Svelte project by implementing a reactive filtered projects store, filtering by the logged-in user, and toggling between all and my projects with dispatch-based updates.

Create a Netlify inc like API by reusing the update project function to adjust the like counter and like by fields, and implement a like project store.

Update the project item Svelte component to enable likes, disable the button when not logged in, and update the like by, likes, and id payload with a badge showing count.

Test the likes button by logging in; the button disables when logged out and a likes badge updates as you like projects. Learn about alerts for duplicate likes.

Create alerts in a Svelte app to provide feedback for actions like like, update, delete, or login. Use an app store and on mount/on destroy to run and clean a timer.

Import alert and app store, then toggle alerts with value one for show and value two for warn. Use in project item and project store for add project or login.

Apply fly and fade transitions to the sidebar and alert components in a Svelte app, tune durations and delays, and preview the animated UI enhancements.

Learn to apply Svelte transitions: scale, slide, fly, and fade, by wrapping components in divs and importing effects for smooth, engaging user interfaces.

Deploy and test the app with Netlify by building with npm run build and deploying live, then review login, likes, filters, and the upcoming easy flip.

Explore easy flip, a calculator-driven method to buy, repair, and sell properties for profit, estimating purchase price, repair costs, and target profit, with a reactive Svelte form and offers guidance.

Complete the easy flip dot svelte component, implement update easy flip in api.js and project store, reuse the update project logic from Netlify, rename the payload, and prepare for deployment.

Update easy flip with api.js updEzFlip and projects.js updateEzFlip, reusing netlify code and alerts, then disable the flip button in project item svelte for non-owners and test deployment.

Deploy your site by manual deploys, test continuous deploy with GitHub, and implement header badge repositioning, wrap flex class, modal color, and padding tweaks.

Master manual deploy with Netlify: build the dist folder via npm run build, deploy live using prod flag, log in to verify production deploys and confirm site details.

Connect a local project to a GitHub repository and Netlify to enable continuous deploy, so every push to GitHub automatically rebuilds your site.

Initialize a local git repository with git init, add files with git add ., commit with git commit -m, push to GitHub, and link the repo to Netlify.

Learn to set up continuous deployment by linking a GitHub repository to Netlify, configure npm run build to output into dist, and deploy your site automatically.

Demonstrates testing continuous deploy by making a code change, staging and committing with git, and pushing to main, then Netlify automatically rebuilds the site without manual deploy.

Thank you for joining this course on Svelte and Netlify; review the course to reinforce learning and discover how these amazing technologies pair together.