Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsjordanmuller/2023-react-sandbox
Self-Paced Learning Sandbox for React, Axios, React Router 6, React Query 4, Redux Toolkit, Create React App, Vite, ContentfulCMS, Tailwind CSS & daisyUI
https://github.com/itsjordanmuller/2023-react-sandbox
axios contentful create-react-app css daisyui html javascript nodejs npm react react-query react-router redux-toolkit tailwindcss vite
Last synced: 2 days ago
JSON representation
Self-Paced Learning Sandbox for React, Axios, React Router 6, React Query 4, Redux Toolkit, Create React App, Vite, ContentfulCMS, Tailwind CSS & daisyUI
- Host: GitHub
- URL: https://github.com/itsjordanmuller/2023-react-sandbox
- Owner: itsjordanmuller
- License: other
- Created: 2023-10-23T22:27:47.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-01-11T06:00:20.000Z (9 months ago)
- Last Synced: 2024-09-20T05:01:56.468Z (8 days ago)
- Topics: axios, contentful, create-react-app, css, daisyui, html, javascript, nodejs, npm, react, react-query, react-router, redux-toolkit, tailwindcss, vite
- Language: JavaScript
- Homepage:
- Size: 11.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
React Sandbox
Self-Paced Learning Sandbox for React, Axios, Node.js, Node Package Manager (npm), React Router 6, React Query 4, Redux Toolkit, Create React App, Vite, ContentfulCMS, Tailwind CSS, daisyUI, HTML, CSS & JavaScript
[](https://jordanmuller.com/portfolio/tags/react/)
[](https://jordanmuller.com/portfolio/tags/javascript/)
[](https://jordanmuller.com/portfolio/tags/html/)
[](https://jordanmuller.com/portfolio/tags/css/)
[](https://jordanmuller.com/portfolio/tags/node-js/)
[](https://jordanmuller.com/portfolio/tags/npm/)
[](https://jordanmuller.com/portfolio/tags/express/)
[](https://jordanmuller.com/portfolio/tags/tailwind-css/)
[](https://jordanmuller.com/portfolio/tags/axios/)
[](https://jordanmuller.com/portfolio/tags/react-query/)
[](https://jordanmuller.com/portfolio/tags/react-router/)
[](https://jordanmuller.com/portfolio/tags/redux/)
[](https://jordanmuller.com/portfolio/tags/redux-toolkit/)
[](https://jordanmuller.com/portfolio/tags/react-redux/)
[](https://jordanmuller.com/portfolio/tags/figma/)
[](https://jordanmuller.com/portfolio/tags/postman/)
[](https://jordanmuller.com/portfolio/tags/create-react-app/)
[](https://jordanmuller.com/portfolio/tags/vite/)
More Technologies 📀
[](https://jordanmuller.com/portfolio/tags/dotenv/)
[](https://jordanmuller.com/portfolio/tags/autoprefixer/)
[](https://jordanmuller.com/portfolio/tags/babel/)
[](https://jordanmuller.com/portfolio/tags/bash/)
[](https://jordanmuller.com/portfolio/tags/cors/)
[](https://jordanmuller.com/portfolio/tags/daisy-ui/)
[](https://jordanmuller.com/portfolio/tags/es-lint/)
[](https://jordanmuller.com/portfolio/tags/json/)
[](https://jordanmuller.com/portfolio/tags/jwt/)
[](https://jordanmuller.com/portfolio/tags/nodemon/)
[](https://jordanmuller.com/portfolio/tags/post-css/)
[](https://jordanmuller.com/portfolio/tags/morgan/)
[](https://jordanmuller.com/portfolio/tags/prettier/)
[](https://jordanmuller.com/portfolio/tags/nano-id/)
[](https://jordanmuller.com/portfolio/tags/react-toastify/)
[](https://jordanmuller.com/portfolio/tags/styled-components/)
[](https://jordanmuller.com/portfolio/tags/uuid/)
[](https://jordanmuller.com/portfolio/tags/kubuntu/)
[](https://jordanmuller.com/portfolio/tags/kde/)
[](https://jordanmuller.com/portfolio/tags/ubuntu/)
[](https://jordanmuller.com/portfolio/tags/debian/)
[](https://jordanmuller.com/portfolio/tags/linux/)
[](https://jordanmuller.com/portfolio/tags/github/)
[](https://jordanmuller.com/portfolio/tags/git/)
[](https://jordanmuller.com/portfolio/tags/markdown/)
[](https://jordanmuller.com/portfolio/tags/vs-code/)
[](https://jordanmuller.com/portfolio/tags/contentful/)
[](https://jordanmuller.com/portfolio/tags/strapi/)
[](https://jordanmuller.com/portfolio/tags/font-awesome/)
[](https://jordanmuller.com/portfolio/tags/unsplash/)
Glossary - Overview of Tools & Tech 💻
Overview of Technologies
| **Technology** | **Overview** | **Release Year** |
|:---:|:---:|:---:|
| [](https://jordanmuller.com/portfolio/tags/dotenv/)
[.env](https://web.archive.org/web/20190427235415/http://environmentvariables.org/) | Environment variables are determined values to provide the ability that can affect the way programs, applications and services will behave. We can use environment variables to affect and change the way our applications run. An environment variable is made up of a name/value pair, like this: API_KEY=1234567890. | [1979](https://en.wikipedia.org/wiki/Environment_variable) |
| [](https://jordanmuller.com/portfolio/tags/autoprefixer/)
[Autoprefixer](https://github.com/postcss/autoprefixer) | Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes. | [2013](https://github.com/postcss/autoprefixer/releases) |
| [](https://jordanmuller.com/portfolio/tags/axios/)
[Axios](https://axios-http.com/) | Axios is a promise-based HTTP library that lets developers make requests to either their own or a third-party server to fetch data. It offers different ways of making requests such as GET , POST , PUT/PATCH , and DELETE . | [2016](https://github.com/axios/axios/releases) |
| [](https://jordanmuller.com/portfolio/tags/babel/)
[Babel](https://babeljs.io/) | Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into backwards-compatible JavaScript code that can be run by older JavaScript engines. It allows web developers to take advantage of the newest features of the language. | [2014](https://en.wikipedia.org/wiki/Babel_(transcompiler)) |
| [](https://jordanmuller.com/portfolio/tags/bash/)
[Bash](https://www.gnu.org/software/bash/) | Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. First released in 1989, it has been used as the default login shell for most Linux distributions and it was one of the first programs Linus Torvalds ported to Linux, alongside GCC. | [1989](https://en.wikipedia.org/wiki/Bash_(Unix_shell)) |
| [](https://jordanmuller.com/portfolio/tags/contentful/)
[Contentful](https://www.contentful.com/) | Contentful is a headless content management system (CMS). You upload your content (be it text, images, or video) to Contentful, and from there can organize and edit it as you desire. | [2013](https://en.wikipedia.org/wiki/Contentful) |
| [](https://jordanmuller.com/portfolio/tags/cors/)
[CORS](https://www.npmjs.com/package/cors) | CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options. | [2013](https://github.com/expressjs/cors) |
| [](https://jordanmuller.com/portfolio/tags/create-react-app/)
[Create React App](https://create-react-app.dev/) | Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. | [2016](https://github.com/facebook/create-react-app/releases?page=9) |
| [](https://jordanmuller.com/portfolio/tags/css/)
[CSS](https://www.w3.org/TR/CSS/#css) | Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. | [1996](https://en.wikipedia.org/wiki/CSS) |
| [](https://jordanmuller.com/portfolio/tags/daisy-ui/)
[daisyUI](https://daisyui.com/) | daisyUl is a component library for Tailwind CSS. While Tailwind CSS provides utility classes for each CSS rule, daisyUI provides additional component class names to Tailwind CSS to make it faster and easier to build web pages. | [2023](https://github.com/saadeghi/daisyui/releases) |
| [](https://jordanmuller.com/portfolio/tags/debian/)
[Debian](https://www.debian.org/) | Debian, also known as Debian GNU/Linux, is a Linux distribution composed of free and open-source software and proprietary software developed by the community-supported Debian Project, which was established by Ian Murdock on August 16, 1993. | [1993](https://en.wikipedia.org/wiki/Debian) |
| [](https://jordanmuller.com/portfolio/tags/es-lint/)
[ESLint](https://eslint.org/) | ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. | [2013](https://en.wikipedia.org/wiki/ESLint) |
| [](https://jordanmuller.com/portfolio/tags/express/)
[Express](https://expressjs.com/) | Express.js, or simply Express, is a back end web application framework for building RESTful APIs with Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. | [2010](https://en.wikipedia.org/wiki/Express.js) |
| [](https://jordanmuller.com/portfolio/tags/figma/)
[Figma](https://www.figma.com/) | Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. | [2016](https://en.wikipedia.org/wiki/Figma) |
| [](https://jordanmuller.com/portfolio/tags/font-awesome/)
[Font Awesome](https://fontawesome.com/) | Font Awesome is a font and icon toolkit based on CSS and Less. As of 2023, Font Awesome was used by 30% of sites that use third-party font scripts, placing Font Awesome in second place after Google Fonts. | [2012](https://en.wikipedia.org/wiki/Font_Awesome) |
| [](https://jordanmuller.com/portfolio/tags/git/)
[Git](https://git-scm.com/) | Git is a distributed version control system that tracks changes in any set of computer files, usually used for coordinating work among programmers who are collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows. | [2005](https://en.wikipedia.org/wiki/Git) |
| [](https://jordanmuller.com/portfolio/tags/github/)
[GitHub](https://github.com/) | GitHub is a developer platform that allows developers to create, store, and manage their code. It uses Git software, providing the distributed version control of Git plus access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project. | [2008](https://en.wikipedia.org/wiki/GitHub) |
| [](https://jordanmuller.com/portfolio/tags/html/)
[HTML](https://html.spec.whatwg.org/) | HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. | [1993](https://en.wikipedia.org/wiki/HTML) |
| [](https://jordanmuller.com/portfolio/tags/javascript/)
[JavaScript](https://ecma-international.org/publications-and-standards/standards/ecma-262/) | JavaScript frameworks, such as React Native, Ionic, NativeScript, and Apache Cordova, enable developers to build native and hybrid mobile apps for Android and iOS. Facebook, Google, Uber, and Instagram all use JavaScript to build their mobile apps. JS is fast, efficient, and straightforward. | [1995](https://en.wikipedia.org/wiki/JavaScript) |
| [](https://jordanmuller.com/portfolio/tags/json/)
[JSON](https://www.json.org/json-en.html) | JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays. It is a common data format with diverse uses in electronic data interchange, including that of web applications with servers. | [2001](https://en.wikipedia.org/wiki/JSON) |
| [](https://jordanmuller.com/portfolio/tags/jwt/)
[JSON Web Tokens](https://datatracker.ietf.org/doc/html/rfc7519) | JSON Web Token is a proposed Internet standard for creating data with optional signature and/or optional encryption whose payload holds JSON that asserts some number of claims. The tokens are signed either using a private secret or a public/private key. | [2010](https://en.wikipedia.org/wiki/JSON_Web_Token) |
| [](https://jordanmuller.com/portfolio/tags/kde/)
[KDE](https://kde.org/) | KDE is an international free software community that develops free and open-source software. As a central development hub, it provides tools and resources that allow collaborative work on this kind of software. | [1996](https://en.wikipedia.org/wiki/KDE) |
| [](https://jordanmuller.com/portfolio/tags/kubuntu/)
[Kubuntu](https://kubuntu.org/) | Kubuntu is an official flavor of the Ubuntu operating system that uses the KDE Plasma Desktop instead of the GNOME desktop environment. As part of the Ubuntu project, Kubuntu uses the same underlying systems. Kubuntu shares the same repositories as Ubuntu and is released regularly on the same schedule as Ubuntu. | [2006](https://en.wikipedia.org/wiki/Kubuntu) |
| [](https://jordanmuller.com/portfolio/tags/linux/)
[Linux](https://kernel.org/) | Linux is a family of open-source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991, by Linus Torvalds. | [1991](https://en.wikipedia.org/wiki/Linux) |
| [](https://jordanmuller.com/portfolio/tags/markdown/)
[Markdown](https://daringfireball.net/projects/markdown/) | Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004 as a markup language that is easy to read in its source code form. | [2004](https://en.wikipedia.org/wiki/Markdown) |
| [](https://jordanmuller.com/portfolio/tags/morgan/)
[Morgan](https://github.com/expressjs/morgan) | HTTP request logger middleware for node.js | [2014](https://github.com/expressjs/morgan/releases) |
| [](https://jordanmuller.com/portfolio/tags/nano-id/)
[nanoid](https://pypi.org/project/nanoid/) | A tiny, secure, URL-friendly, unique string ID generator for Python. | [2017](https://github.com/puyuan/py-nanoid) |
| [](https://jordanmuller.com/portfolio/tags/node-js/)
[Node.js](https://nodejs.org/) | Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting. | [2009](https://en.wikipedia.org/wiki/Node.js) |
| [](https://jordanmuller.com/portfolio/tags/nodemon/)
[Nodemon](https://www.npmjs.com/package/nodemon) | Simple monitor script for use during development of a Node.js based applications by automatically restarting the node application when file changes in the directory are detected. | [2011](https://github.com/remy/nodemon) |
| [](https://jordanmuller.com/portfolio/tags/npm/)
[npm](https://www.npmjs.com/) | npm is the world's largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well. npm consists of three distinct components: the website. the Command Line Interface (CLI) | [2010](https://en.wikipedia.org/wiki/Npm) |
| [](https://jordanmuller.com/portfolio/tags/post-css/)
[PostCSS](https://postcss.org/) | PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians. | [2013](https://en.wikipedia.org/wiki/PostCSS) |
| [](https://jordanmuller.com/portfolio/tags/postman/)
[Postman](https://www.postman.com/) | Postman is an API platform for developers. The company is headquartered in San Francisco and maintains an office in Bangalore, where it was founded. As of February 2023, Postman reports having more than 30 million registered users and 75,000 open APIs, which it says constitutes the world's largest public API hub. | [2012](https://en.wikipedia.org/wiki/Postman_(software)) |
| [](https://jordanmuller.com/portfolio/tags/prettier/)
[Prettier](https://prettier.io/) | Prettier, known for its strong formatting opinions, supports a broad range of programming languages. It seamlessly integrates with the majority of code editors and offers a streamlined set of configuration options. | [2017](https://github.com/prettier/prettier/releases) |
| [](https://jordanmuller.com/portfolio/tags/react/)
[React](https://react.dev/) | React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. | [2013](https://en.wikipedia.org/wiki/React_(software)) |
| [](https://jordanmuller.com/portfolio/tags/react-query/)
[React Query](https://tanstack.com/query) | React Query is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. | [2020](https://github.com/TanStack/query/releases?page=75) |
| [](https://jordanmuller.com/portfolio/tags/react-redux/)
[React Redux](https://react-redux.js.org/) | React Redux is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state. | [2015](https://www.bairesdev.com/blog/what-is-redux-and-why-it-matters/) |
| [](https://jordanmuller.com/portfolio/tags/react-router/)
[React Router](https://reactrouter.com/en/main) | React Router, a widely-used library in React, offers functionality for navigating between different component views. It provides capabilities for altering the browser URL and ensures that the user interface remains synchronized with the URL. | [2015](https://ui.dev/react-router-tutorial#what-is-react-router) |
| [](https://jordanmuller.com/portfolio/tags/react-toastify/)
[React-Toastify](https://www.npmjs.com/package/react-toastify) | React-Toastify is a highly customizable notification library designed for React. It allows developers to easily add toast notifications to their web applications, offering a rich set of features to control the appearance, position, and behavior of the toasts. | [2017](https://github.com/fkhadra/react-toastify) |
| [](https://jordanmuller.com/portfolio/tags/redux/)
[Redux](https://redux.js.org/) | Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion. | [2015](https://www.bairesdev.com/blog/what-is-redux-and-why-it-matters/) |
| [](https://jordanmuller.com/portfolio/tags/redux-toolkit/)
[Redux Toolkit](https://redux-toolkit.js.org/) | Redux Toolkit is an official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic, and it is strongly recommend that you use it. | [2019](https://blog.isquaredsoftware.com/2019/10/redux-toolkit-1.0/) |
| [](https://jordanmuller.com/portfolio/tags/strapi/)
[Strapi](https://strapi.io/) | Strapi is an open-source, Node. js based, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks. Strapi also enables content editors to streamline content delivery (text, images, video, etc) across any devices. | [2015](https://strapi.io/about-us-old) |
| [](https://jordanmuller.com/portfolio/tags/styled-components/)
[styled-components](https://styled-components.com/) | Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles. | [2016](https://github.com/styled-components/styled-components/releases) |
| [](https://jordanmuller.com/portfolio/tags/tailwind-css/)
[Tailwind CSS](https://tailwindcss.com/) | Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. | [2017](https://en.wikipedia.org/wiki/Tailwind_CSS) |
| [](https://jordanmuller.com/portfolio/tags/ubuntu/)
[Ubuntu](https://ubuntu.com/) | Ubuntu is a Linux distribution based on Debian and composed mostly of free and open-source software. Ubuntu is officially released in multiple editions: Desktop, Server, and Core for Internet of things devices and robots. | [2004](https://en.wikipedia.org/wiki/Ubuntu) |
| [](https://jordanmuller.com/portfolio/tags/unsplash/)
[Unsplash](https://unsplash.com/) | Unsplash is a website dedicated to proprietary stock photography. Since 2021, it has been owned by Getty Images. The website claims over 330,000 contributing photographers and generates more than 13 billion photo impressions per month on their growing library of over 5 million photos. | [2013](https://en.wikipedia.org/wiki/Unsplash) |
| [](https://jordanmuller.com/portfolio/tags/uuid/)
[uuid](https://www.npmjs.com/package/uuid) | The uuid npm package is a versatile solution for creating RFC4122-compliant UUIDs (versions 1, 3, 4, 5). It offers cross-platform support, including NodeJS, major browsers, and React Native. This secure, zero-dependency package is optimized for size and compatibility with module bundlers and includes a command-line utility. | [2014](https://github.com/uuidjs/uuid) |
| [](https://jordanmuller.com/portfolio/tags/vite/)
[Vite](https://vitejs.dev/) | Vite is a platform-agnostic front end tool for building web applications quickly and solves some common developer headaches. Tim Davidson. In recent years, the front-end development ecosystem has seen an explosion of new tools and frameworks designed to improve the developer experience. | [2020](https://en.wikipedia.org/wiki/Vite_(software)) |
| [](https://jordanmuller.com/portfolio/tags/vs-code/)
[VS Code](https://code.visualstudio.com/) | Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE. | [2015](https://en.wikipedia.org/wiki/Visual_Studio_Code) |
Main Sections & Projects
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/01-fundamentals/react-fundamentals)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/02-backroads-project/backroads-app)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/01-useState/starter)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/02-useEffect/starter)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/03-conditional-rendering/starter)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/04-project-structure)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/05-leverage-javascript/starter)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/06-forms/starter)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/07-useRef/starter)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/08-custom-hooks/starter)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/09-context-api)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/10-useReducer/starter)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/11-performance/starter)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/01-birthday-buddy/birthday-buddy)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/02-tours/tours)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/03-reviews/reviews)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/04-accordion/accordion)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/05-menu/menu)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/06-tabs/tabs)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/07-slider/slider)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/08-lorem-ipsum/lorem-ipsum)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/09-color-generator/color-generator)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/10-grocery-bud/grocery-bud)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/11-navbar/navbar)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/12-sidebar/sidebar)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/13-strapi-submenus/strapi-submenus)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/14-cart/cart)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/05-axios-tutorial/axios)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/06-react-query)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/07-unsplash-images/stock-images)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/08-contentful-cms/contentful)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/09-mixmaster/mixmaster)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/10-tailwind-portfolio/portfolio)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/11-redux-toolkit-tutorial/redux-toolkit-tutorial)
[](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/12-comfy-store/comfy-store)
Table of Contents 🗃️
* [1. Fundamentals](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/01-fundamentals/react-fundamentals)
* [2. BackRoads Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/02-backroads-project/backroads-app)
* [3. Advanced React](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react)
- [A. useState Hook](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/01-useState/starter)
- [B. useEffect Hook](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/02-useEffect/starter)
- [C. Conditional Rendering](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/03-conditional-rendering/starter)
- [D. Project Structure](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/04-project-structure)
- [E. Leveraging JavaScript](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/05-leverage-javascript/starter)
- [F. React Forms](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/06-forms/starter)
- [G. useRef Hook](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/07-useRef/starter)
- [H. Custom Hooks](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/08-custom-hooks/starter)
- [I. Context API](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/09-context-api)
- [J. useReducer Hook](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/10-useReducer/starter)
- [K. Performance](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/11-performance/starter)
* [4. Fundamental Projects](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects)
- [A. Birthday Buddy Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/01-birthday-buddy/birthday-buddy)
- [B. Tours Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/02-tours/tours)
- [C. Reviews Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/03-reviews/reviews)
- [D. Accordion Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/04-accordion/accordion)
- [E. Menu Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/05-menu/menu)
- [F. Tabs Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/06-tabs/tabs)
- [G. Slider Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/07-slider/slider)
- [H. Lorem Ipsum Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/08-lorem-ipsum/lorem-ipsum)
- [I. Color Generator Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/09-color-generator/color-generator)
- [J. Grocery Bud Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/10-grocery-bud/grocery-bud)
- [K. Navbar Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/11-navbar/navbar)
- [L. Sidebar Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/12-sidebar/sidebar)
- [M. Strapi Submenus Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/13-strapi-submenus/strapi-submenus)
- [N. Cart Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/14-cart/cart)
* [5. Axios Tutorial](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/05-axios-tutorial/axios)
* [6. React Query](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/06-react-query)
* [7. Unsplash Images Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/07-unsplash-images/stock-images)
* [8. Contentful CMS Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/08-contentful-cms/contentful)
* [9. MixMaster Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/09-mixmaster/mixmaster)
* [10. Tailwind Portfolio](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/10-tailwind-portfolio/portfolio)
* [11. Redux Toolkit](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/11-redux-toolkit-tutorial/redux-toolkit-tutorial)
* [12. Comfy Store Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/12-comfy-store/comfy-store)
- 💌 Special Thanks
📖 About The Project
📂 Project Introduction
The "React 18 Tutorial and Projects Course (2023)" was a step forward in my journey with front-end development. Led by experienced instructor John Smilga, this course was a fantastic opportunity to explore React 18. The curriculum was designed not just to teach at a surface level, but to immerse me in the practical aspects of React, enabling me to build over 25 different projects. These ranged from a simple Birthday Reminder to a simulated e-commerce store filled with fictional products, each reinforcing a different aspect of React.
⛳ Learning Objectives & Goals
My objective for enrolling in this course was to gain a solid grasp of React. Coming in with a background in HTML, CSS, and JavaScript, I aimed to explore deeper into React's functionalities, understanding its core features, getting to grips with state management, and navigating its component-based architecture. The project-based learning structure of the course was pivotal in converting theory into practical, real-world applications.
🗓️ Project Timeline
I started this course on October 23rd, 2023, with a focus on consistent progress. The course was well-paced, allowing me to absorb the intricacies of each new concept before moving on to the next. This steady approach paid off, enabling me to not only complete each project but also to build a solid understanding of React's role and capabilities in modern web development.
💡 Usage Guide
🚀 Getting Started
Looking for Live Demos? 🌐
If you're eager to simply see the results of this project, most, if not all of the projects have a Live Demo associated with them. I have linked them all in the overview for each specific project/section. To view these live demos, simply follow the links provided with each project. You'll see them alongside buttons that look like this:
Click the button/link and you should be taken to the Live Demo for that specific project. Please note that some projects don't have a Live Demo, and if that's the case there will not be a button/link. I'm hoping to get all of the projects on the internet at some point in the near future, so check back soon and you might find a link!
Want to View the Projects on Your Local Machine? 💻
I have provided detailed instructions for how to clone/download this repository to your local machine in the Setup Instructions section. In that section, you should find everything you need to be able to get these projects running and working on your own machine. Please note that a few of the projects use external APIs that include verification, so you will need to setup your own accounts/API keys for those services.
If you plan on running the code on your local machine, be sure to check the specific project you're trying to run to see if it needs any additional information or setup for the connections to the API to work. In most cases, I will try to include a `.env.example` file. You will need to open this file, and read the instructions inside to obtain your own API key. Once that's done, you'll need to make sure you've renamed the file from `.env.example` to `.env` only.
If you want to avoid setting up environment variables, check to see if the project has a Live Demo associated with it. For all of the projects that I have hosted on the internet, you'll be able to use them without any API configuration required. This is often a simpler way of viewing more complicated projects, since everything will already be running for you to view, use & explore.
Just Hoping to Learn More About Programming? 📚
I have provided a variety of resources and guides throughout this README for new developers. From the absolute basics, to specific videos and guides that helped me get unstuck in certain situations, I tried to include every single resource I ended up utilizing over the course of my journey.
We are so lucky to live in a time where almost all of this information is available for free on the internet. The only thing I paid for was the course itself, which can be purchased for about $20 on sale at Udemy. Besides that, I was able to complete the project with a low-spec Lenovo Thinkpad T480 I purchased for just under $300. It's proven to be a perfect machine for development & running Kubuntu Linux.
A full list of tech, tools, and other links & resources can be found towards the bottom of this README in the Links & Citations section.
💾 Installation
For detailed installation instructions, please refer to the Setup Instructions section below.
🛠️ Setup Instructions
📋 Prerequisites
Required Software 💽
To be able to clone/download & view these projects, or to start learning HTML, CSS, and JavaScript as well as web development in general, you'll need a few essential tools. At a minimum, you should have a basic text editor/integrated development environment, a web browser, and an internet connection.
I used the following:
- **Text Editor/IDE:** I use [Visual Studio Code](https://code.visualstudio.com/) as my main integrated development environment. VS Code can be customized to work with just about any technology, making it a great choice for a general all-purpose IDE, it also has a large and helpful community for support.
- **Web Browser:** I prefer to use [Google Chrome](https://www.google.com/chrome/) for their comprehensive set of [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/). While most if not all of the tools are available in other browsers/Developer Tools such as [Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/index.html), [Safari Web Inspector](https://webkit.org/web-inspector/), and [Edge DevTools](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/landing/), I am most familiar & comfortable with the layout of Chrome.
- **Internet Connection:** Aim to have at least 2-3 Mbps or more to speed up development, especially if you'll be downloading large files or loading video/image based resources. Most libraries and a variety of public places can have high-speed Wi-Fi available for visitors free-of-charge.
Based on the fact that you're reading this right now, you probably already have a browser & internet connection!
[Windows](https://www.microsoft.com/en-us/windows), [macOS](https://www.apple.com/macos/), and most [Linux distributions](https://en.wikipedia.org/wiki/Linux_distribution) should include a text editor by default, which in this case should be more than enough to view and edit HTML, CSS & JavaScript files.
For those using mobile devices, I advise switching to a laptop or desktop for a more streamlined experience. While mobile development is feasible on Android or iOS, the ease of a full-sized computer, keyboard, and mouse is unmatched. Visual Studio Code is accessible via most browsers on any device, however, you would still need to serve/host it from another machine. For optimal functionality, a personal computer remains the best choice.
System Requirements 🖥️
System requirements for these projects can vary due to the fact that they use different amounts of client-side processing power and resources. In general, a recent operating system like [Windows](https://www.microsoft.com/en-us/windows), [macOS](https://www.apple.com/macos/), or a popular [Linux distribution](https://en.wikipedia.org/wiki/Linux_distribution) usually suffices. Modern computers, especially those purchased in the last few years, should meet these needs adequately.
Performance will heavily rely on your specific hardware setup, including processor speed, RAM capacity, storage type, and graphics card quality. The operating system choice and its configuration also play a significant role in speed.
To give you a practical example, I personally used a [Lenovo Thinkpad T480](https://www.amazon.com/dp/B0842X4BNF) for the entirety of my recent projects. This laptop, has been great for a variety of daily tasks, including programming.
The computer I used for the entire project features the following specifications:
- **Operating System:** [Kubuntu Linux 22.04](https://cdimage.ubuntu.com/kubuntu/releases/22.04/release/)
- **Processor:** 8th Gen Intel Core Duo i5-8350U
- **RAM:** 16GB DDR4 RAM
- **Storage:** 512GB SSD of data
- **Graphics:** Intel UHD Graphics 620
- **Display:** 14.0" Screen with FHD 1920x1080 resolution.
This configuration was more than sufficient for both my project and other tasks. Interestingly, working on a less powerful laptop has its advantages, such as highlighting inefficient code that consumes excessive resources.
If you're unsure, I recommend testing your setup with the intended software. Should you encounter any errors, feel free to reach out for assistance. Your feedback can also help in making projects more adaptable to diverse hardware, operating systems, and browsers.
📦 Installation Guide
Download/Clone This Repo ⬇️
Below you will find various methods that are available to download/clone this repository.
Feel free to use whichever option you are most comfortable & familiar with. You can also read GitHub's guide on [downloading source code archives](https://docs.github.com/en/repositories/working-with-files/using-files/downloading-source-code-archives) & [cloning repositories](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
| 💡 Download Method Details |
|:--|
Clone with SSH ★
1. **Ensure SSH Key Setup**: Before you can clone with SSH, make sure you have an SSH key set up and added to your GitHub account. If you haven't done this, refer to GitHub's documentation on setting up a new SSH key.
2. **Copy SSH URL**: Navigate to the repository on GitHub. Click the 'Code' button and switch to the 'SSH' tab in the dropdown menu. Click the clipboard icon to copy the SSH URL.
3. **Open Terminal or Command Prompt**: Open your terminal or command prompt. Navigate to the directory where you want the cloned repository to be placed.
4. **Run Clone Command**: Type `git clone` followed by the copied SSH URL. For this project, that's:
```
git clone [email protected]:itsjordanmuller/2023-react-sandbox.git
```
5. **Access Cloned Repository**: Once the cloning process is complete, you will have a local copy of the repository. Navigate into the newly created directory to access the repository files.
Note: Cloning with SSH is secure and allows for easy repository updates without repeatedly entering credentials.
Download ZIP File
1. **Navigate to the Repository**: Open your web browser and go to the main page of the repository.
2. **Find the 'Code' Button**: On the repository's main page, locate the 'Code' button. This is usually found near the top right, just above the file list.
3. **Download ZIP Option**: Click on the 'Code' button. A dropdown menu will appear. Select the 'Download ZIP' option from this menu.
4. **Save the ZIP File**: Choose a location on your computer where you want to save the ZIP file and confirm the download.
5. **Extract Files**: Once the download is complete, navigate to the downloaded file. Right-click on the ZIP file and select 'Extract All...' or use your preferred extraction tool. Choose where you want the extracted folder to be placed.
6. **Access Repository Contents**: Open the extracted folder to access the contents of the repository.
Note: Downloading a ZIP file is a great way to get a copy of the repository without using Git commands.
Clone with HTTPS
1. **Copy HTTPS URL**: Go to the GitHub page of the repository. Click on the 'Code' button. Under the dropdown menu, select the 'HTTPS' tab and click the clipboard icon to copy the HTTPS URL.
2. **Open Terminal or Command Prompt**: Access your terminal (Linux/Mac) or command prompt (Windows). Navigate to the directory where you want the repository to be cloned.
3. **Execute Clone Command**: Type `git clone` followed by the copied HTTPS URL. In this case:
```
git clone https://github.com/itsjordanmuller/2023-react-sandbox.git
```
4. **Enter GitHub Credentials**: If prompted, enter your GitHub username and password. This step is usually required the first time you use HTTPS to clone a repository.
5. **Access Cloned Repository**: After the cloning process completes, a local copy of the repository will be created. Navigate into the directory that was just created to start working with the files.
Note: HTTPS cloning is straightforward but may require you to enter your GitHub credentials more frequently compared to SSH.
Clone with GitHub CLI
The GitHub CLI (`gh`) provides a convenient way to interact with GitHub from your command line. Here’s how to use `gh` to clone the repository `itsjordanmuller/2023-react-sandbox`:
1. **Install GitHub CLI**: If you haven't already, you need to install the GitHub CLI. You can find installation instructions on the [official GitHub CLI page](https://cli.github.com/).
2. **Authenticate GitHub CLI**: Open your terminal and authenticate the GitHub CLI using the command `gh auth login`. Follow the prompts to complete the authentication process.
3. **Clone the Repository**: To clone this repository, use the following command:
```
gh repo clone itsjordanmuller/2023-react-sandbox
```
This command will clone the repository into a new directory named `2023-react-sandbox` in your current working directory.
4. **Navigate to the Repository**: Once the cloning process is complete, navigate into the repository directory with:
```
cd 2023-react-sandbox
```
5. **Start Working**: You now have a local copy of the repository and can begin working on it.
Note: The GitHub CLI streamlines various GitHub operations and is particularly useful for those who prefer command-line tools.
★ When I have the option, I personally prefer to use the `Clone with SSH` method. Alternatively, `Download ZIP File` can be a quick and easy way to simply download the files without a terminal or Git.
⚙️ Configuration
API Keys/Environment Variables 🔐
🔍 Sections & Projects
### [1. Fundamentals](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/01-fundamentals/react-fundamentals)
In this section of my React learning journey, I have meticulously explored the foundational concepts and techniques crucial for building React applications. Each commit in my repository is a step in this journey, reflecting my evolving understanding and application of React.
#### Key Learnings
##### Initial Setup and Component Creation
- **React Application Setup**: Leveraged Create-React-App for a streamlined setup and launch of the development server.
- **Creating Components**: Developed my initial `Greeting` component, gaining proficiency in JSX and various component creation methods, including ES7 snippets.
##### Deep Dive into JSX
- **JSX Rules and Syntax**: Mastered the nuances of JSX, including the necessity of wrapper divs, using `React.Fragment`, and understanding self-closing tags.
- **Component Nesting and Prop Drilling**: Explored complex data flow through nested components and prop drilling.
##### Styling and Performance Optimization
- **CSS and Inline Styles**: Experimented with external CSS and inline styles using JavaScript objects, learning about style precedence in React.
- **Image Optimization**: Enhanced performance by shifting image imports from the public folder to the src folder.
##### Advanced Concepts
- **Event Handling and States**: Investigated event handling in JSX, including anonymous functions and the intricacies of event objects.
- **Code Refactoring**: Improved code organization by refactoring components and employing ES6 modules for cleaner, modular code.
##### Building the BookList Application
- **Dynamic Rendering**: Implemented dynamic component rendering using the `map` function and the concept of keys for efficient updates.
- **Props and State Management**: Enhanced the `Book` component's dynamism by passing data as props and utilizing spread operators for props.
- **Styling and Layout**: Focused on CSS for styling individual components and setting responsive layouts.
##### Additional Insights
- **JavaScript in JSX**: Demonstrated the integration of JavaScript in JSX, including handling expressions and variables.
- **Destructuring and Children Props**: Utilized destructuring for cleaner code and explored the use of children props for component flexibility.
- **Event Handling Enhancements**: Delved deeper into event handling, showcasing methods for more concise and direct event management in components.
- **Complex Prop Drilling**: Tackled more advanced prop drilling scenarios involving functions as props.
#### Components
##### Book Component
#### Project Structure
- `public/index.html`: Entry point with basic HTML structure and metadata.
- `src/index.js`: JavaScript entry, rendering the `BookList` component.
- `src/Book.js`: Component for displaying book details.
- `src/books.js`: Array of book objects, demonstrating data structuring.
- `src/index.css`: Central CSS file for styling.
### [2. BackRoads Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/02-backroads-project/backroads-app)
This section of my React learning journey focuses on developing the "BackRoads App," a travel tour showcase application. The process involved setting up the project using Create-React-App, building individual components, and linking them with a centralized data source for dynamic content rendering.
#### Development Steps
##### Initial Setup
- **Project Creation**: Used Create-React-App for initial setup.
- **Boilerplate Modification**: Removed unnecessary extras from the src folder.
- **Importing Starter HTML**: Brought in HTML, CSS, and images from the project's starter files and adapted them for React.
##### Component Development and Styling
- **Component Refactoring**: Segmented the app into reusable components, such as `Navbar`, `Hero`, `About`, `Services`, `Tours`, and `Footer`.
- **Dynamic Content Rendering**: Utilized data from `data.js` for dynamic rendering in components like `Navbar`, `Services`, `Tours`, and `Footer`.
- **Styling Adjustments**: Modified CSS to fit the React component structure and adjusted class names to the JSX-friendly `className`.
##### Data Centralization and Management
- **Centralized Data Source**: Created `data.js` to manage content for tours, services, page links, and social links.
- **Dynamic Image Sources**: Modified image sources in components like `Hero` and `About` to dynamically load from the `images` folder.
- **Reusable Sub-components**: Developed sub-components like `PageLinks`, `SocialLinks`, `Service`, and `Tour` for modular content rendering.
##### Advanced Configuration
- **Package.json Modification**: Adjusted `package.json` to include CI environment variables and build scripts for different environments.
- **Component Enhancement**: Implemented features like dynamic page links and social icons, refactoring for better code reuse and maintainability.
#### Components
##### About Component
##### Services Component
##### Tours Component
##### Footer Component
##### Hero Component
##### Navbar Component
##### Title Component
##### Social Links Component
##### Page Links Component
#### Project Structure
- `App.js`: The main app component integrating all sub-components.
- `data.js`: Central data source for the app's dynamic content.
- `components/`: Folder containing individual components and sub-components.
- `images/`: Contains images used throughout the app.
- `index.js`: Entry point for the React app, rendering `App`.
- `package.json`: Configuration file for dependencies, scripts, and project metadata.
### [3. Advanced React](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react)
#### [A. useState Hook](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/01-useState/starter)
#### [B. useEffect Hook](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/02-useEffect/starter)
#### [C. Conditional Rendering](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/03-conditional-rendering/starter)
#### [D. Project Structure](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/04-project-structure)
#### [E. Leveraging JavaScript](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/05-leverage-javascript/starter)
#### [F. React Forms](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/06-forms/starter)
#### [G. useRef Hook](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/07-useRef/starter)
#### [H. Custom Hooks](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/08-custom-hooks/starter)
#### [I. Context API](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/09-context-api)
#### [J. useReducer Hook](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/10-useReducer/starter)
#### [K. Performance](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/03-advanced-react/advanced-react/src/tutorial/11-performance/starter)
### [4. Fundamental Projects](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects)
#### [A. Birthday Buddy Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/01-birthday-buddy/birthday-buddy)
#### [B. Tours Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/02-tours/tours)
#### [C. Reviews Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/03-reviews/reviews)
#### [D. Accordion Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/04-accordion/accordion)
#### [E. Menu Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/05-menu/menu)
#### [F. Tabs Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/06-tabs/tabs)
#### [G. Slider Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/07-slider/slider)
#### [H. Lorem Ipsum Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/08-lorem-ipsum/lorem-ipsum)
#### [I. Color Generator Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/09-color-generator/color-generator)
#### [J. Grocery Bud Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/10-grocery-bud/grocery-bud)
#### [K. Navbar Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/11-navbar/navbar)
#### [L. Sidebar Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/12-sidebar/sidebar)
#### [M. Strapi Submenus Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/13-strapi-submenus/strapi-submenus)
#### [N. Cart Project](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/04-fundamental-projects/14-cart/cart)
### [5. Axios](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/05-axios-tutorial/axios)
### [6. React Query](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/06-react-query)
### [7. Fetch Stock Images](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/07-unsplash-images/stock-images)
### [8. Contentful CMS](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/08-contentful-cms/contentful)
### [9. MixMaster](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/09-mixmaster/mixmaster)
### [10. Tailwind Portfolio](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/10-tailwind-portfolio/portfolio)
### [11. Redux Toolkit](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/11-redux-toolkit-tutorial/redux-toolkit-tutorial)
### [12. Comfy Store](https://github.com/itsjordanmuller/2023-react-sandbox/tree/main/12-comfy-store/comfy-store)
🌟 Acknowledgements
💌 Special Thanks
Dear John Smilga,
I want to express my sincere gratitude for your outstanding course, "React 18 Tutorial & Projects Course (2023)." Your comprehensive teaching approach has not only taught me React but also a wide array of related skills that are crucial in today’s web development landscape.
The self-paced learning sandbox you created is a testament to your dedication and skill as an educator. Through your course, I've gained proficiency in a range of technologies including Axios, Node.js, npm, React Router 6, React Query 4, Redux Toolkit, and more. Your lessons on Vite, ContentfulCMS, Tailwind CSS, daisyUI, along with foundational web technologies like HTML, CSS, and JavaScript, have immensely broadened my understanding and capabilities.
Your method of teaching is clear, engaging, and incredibly effective. Each module was well-structured, providing practical, hands-on experience that made complex concepts much easier to grasp. I am particularly appreciative of how you integrated modern tools and best practices, preparing me for real-world web development challenges.
Thank you for your hard work and dedication in creating such a valuable learning resource. It has been instrumental in my journey as a developer, and I am deeply grateful for the knowledge and skills I have acquired under your guidance.
Sincerely,
- Jordan Muller
📬 Contact Information
If you have questions/feedback, I would love to hear from you. Thanks for stopping by!
- Jordan Muller
[](https://www.linkedin.com/in/itsjordanmuller)
[](mailto:[email protected])
[](https://jordanmuller.com/)
Please feel free to reach out if you have any suggestions or run into any issues with viewing this project.
I am always looking for feedback from other people! I'd be more than happy to answer any questions you may have as well as assist with getting the project working on your machine.
Be sure to view the Setup Instructions in the README, as well as any specific README files for that specific project as they contain more details and may already have the answer to your question(s)!
🔗 Links & Citations
📓 Course & Instructor Details
Course - React 18 Tutorial and Projects Course (2023)
udemy.com/course/react-tutorial-and-projects-course/
Instructor Information 👥
Instructor Name
Profile Link
John Smilga
John's Udemy Profile
📀 Core Technologies
Languages 🔠
HTML
1993
Home
html.spec.whatwg.org/
Topic
View HTML Resources & Information
MDN Guides
Wikipedia Article
en.wikipedia.org/wiki/HTML
View HTML Support & Communities
Forums & Discussion Boards
Stack Overflow Help
stackoverflow.com/questions/tagged/html
CSS
1996
Home
w3.org/TR/CSS/#css
Topic
View CSS Resources & Information
MDN Guides
Interactive Learning Games
Wikipedia Article
en.wikipedia.org/wiki/CSS
View CSS Support & Communities
Forums & Discussion Boards
Stack Overflow Help
stackoverflow.com/questions/tagged/css
JavaScript
1995
Home
ecma-international.org/
Topic
View JavaScript Resources & Information
MDN Guides
Simplified JavaScript Jargon Guide
jargon.js.org/
Wikipedia Article
en.wikipedia.org/wiki/JavaScript
View JavaScript Support & Communities
Forums & Discussion Boards
Stack Overflow Help
stackoverflow.com/questions/tagged/javascript
Markdown
2004
Home
daringfireball.net/projects/markdown/
Topic
github.com/topics/markdown
View Markdown Resources & Information
Additional Guides
GitHub Flavored Markdown
github.github.com/gfm/
Wikipedia Article
en.wikipedia.org/wiki/Markdown
View Markdown Support & Communities
Forums & Discussion Boards
reddit.com/r/Markdown/
Stack Overflow Help
stackoverflow.com/questions/tagged/markdown
Frameworks 🏗️
Tailwind CSS
2017
Home
tailwindcss.com
Docs
tailwindcss.com/docs/installation
Repo
github.com/tailwindlabs/tailwindcss
Topic
github.com/topics/tailwind
View Tailwind CSS Resources & Information
Tailwind CSS Blog
tailwindcss.com/blog
Wikipedia Article
en.wikipedia.org/wiki/Tailwind_CSS
View Tailwind CSS Support & Communities
Forums & Discussion Boards
reddit.com/r/tailwindcss/
Stack Overflow Help
stackoverflow.com/questions/tagged/tailwind-css
Libraries 📙
Axios
2016
Home
axios-http.com
Docs
axios-http.com/docs/intro
Repo
github.com/axios/axios
Topic
github.com/topics/axios
View Axios Resources & Information
Axios API Reference
axios-http.com/docs/api_intro
Axios Code of Conduct
github.com/axios/axios/blob/master/CODE_OF_CONDUCT.md
View Axios Support & Communities
Axios Issues on GitHub
github.com/axios/axios/issues
Stack Overflow Help
stackoverflow.com/questions/tagged/axios
🧰 Developer Tools
Git
2005
Home
git-scm.com/
Docs
git-scm.com/doc
Repo
github.com/git/git
Topic
github.com/topics/git
View Git Resources & Information
Visual Git Cheatsheet
ndpsoftware.com/git-cheatsheet.html
Videos
Git and GitHub Tutorial for Beginners by Kevin Stratvert
Wikipedia Article
en.wikipedia.org/wiki/Git
View Git Support & Communities
Community Links
Forums & Discussion Boards
reddit.com/r/git/
Stack Overflow Help
stackoverflow.com/questions/tagged/git
GitHub
2008
Home
github.com/
My Profile
github.com/itsjordanmuller
Topic
github.com/topics/github
View GitHub Resources & Information
Guides
docs.github.com/en/get-started/quickstart/hello-world
Videos
Git and GitHub Tutorial for Beginners by Kevin Stratvert
Wikipedia Article
en.wikipedia.org/wiki/GitHub
View GitHub Support & Communities
GitHub Support
support.github.com/
Forums & Discussion Boards
reddit.com/r/github/
Stack Overflow Help
stackoverflow.com/questions/tagged/github
VS Code
2015
Home
code.visualstudio.com/
Repo
github.com/microsoft/vscode
Topic
github.com/topics/vscode
View VS Code Resources & Information
VS Code Blog
code.visualstudio.com/blogs
Wikipedia Article
en.wikipedia.org/wiki/Visual_Studio_Code
View VS Code Support & Communities
Forums & Discussion Boards
reddit.com/r/vscode/
Stack Overflow Help
stackoverflow.com/questions/tagged/visual-studio-code
Bash
1989
Home
gnu.org/software/bash/
Topic
View Bash Resources & Information
About GNU
www.gnu.org/gnu/gnu.html
Wikipedia Article
en.wikipedia.org/wiki/Bash_(Unix_shell)
View Bash Support & Communities
Forums & Discussion Boards
reddit.com/r/bash/
Stack Overflow Help
stackoverflow.com/questions/tagged/bash
Prettier
2017
Home
prettier.io
Docs
prettier.io/docs/en
Repo
github.com/prettier/prettier
Topic
github.com/topics/prettier
View Prettier Resources & Information
Prettier Playground
prettier.io/playground
Prettier Blog
prettier.io/blog
View Prettier Support & Communities
Stack Overflow Help
stackoverflow.com/questions/tagged/prettier
ESLint
2013
Home
eslint.org
Docs
eslint.org/docs/latest
Repo
github.com/eslint/eslint
Topic
github.com/topics/eslint
View ESLint Resources & Information
Playground
eslint.org/play
Blog
eslint.org/blog
View ESLint Support & Communities
Stack Overflow Help
stackoverflow.com/questions/tagged/eslint
Kubuntu
2006
Home
kubuntu.org/
Topic
github.com/topics/kubuntu
View Kubuntu Resources & Information
Features
kubuntu.org/feature-tour/
About Kubuntu
kubuntu.org/about-us/
Wikipedia Article
en.wikipedia.org/wiki/Kubuntu
View Kubuntu Support & Communities
Kubuntu Community
kubuntu.org/community/
Forums & Discussion Boards
reddit.com/r/kubuntu/
Stack Overflow Help
unix.stackexchange.com/questions/tagged/kubuntu
KDE
1996
Home
kde.org/
Topic
github.com/topics/kde
View KDE Resources & Information
What is KDE?
kde.org/community/whatiskde/
KDE Apps
apps.kde.org
Wikipedia Article
en.wikipedia.org/wiki/KDE
View KDE Support & Communities
Forums & Discussion Boards
reddit.com/r/kde/
Stack Overflow Help
unix.stackexchange.com/questions/tagged/kde
Ubuntu
2004
Home
ubuntu.com/
Topic
github.com/topics/ubuntu
View Ubuntu Resources & Information
Ubuntu Blog
ubuntu.com/blog
Ubuntu Resources
ubuntu.com/engage
Wikipedia Article
en.wikipedia.org/wiki/Ubuntu
View Ubuntu Support & Communities
Ubuntu Community
ubuntu.com/#community
Forums & Discussion Boards
reddit.com/r/Ubuntu/
Stack Overflow Help
stackoverflow.com/questions/tagged/ubuntu
Debian
1993
Home
debian.org
Topic
github.com/topics/debian
View Debian Resources & Information
Debian Blog
bits.debian.org
Wikipedia Article
en.wikipedia.org/wiki/Debian
View Debian Support & Communities
Debian Support
debian.org/support
Forums & Discussion Boards
reddit.com/r/debian/
Stack Overflow Help
stackoverflow.com/questions/tagged/Debian
Linux
1991
Home
kernel.org
Topic
github.com/topics/linux
View Linux Resources & Information
About Linux
kernel.org/category/about.html
Frequently Asked Questions
kernel.org/category/faq.html
Wikipedia Article
en.wikipedia.org/wiki/Linux
View Linux Support & Communities
Linux Support
kernel.org/category/contact-us.html
Forums & Discussion Boards
reddit.com/r/linux/
Stack Overflow Help
stackoverflow.com/questions/tagged/linux
🗂️ Additional & External Resources
Font Awesome
2012
Home
fontawesome.com
Docs
fontawesome.com/docs
Repo
github.com/FortAwesome/Font-Awesome
Topic
github.com/topics/font-awesome
View Font Awesome Resources & Information
Icons
fontawesome.com/icons
View Font Awesome Support & Community
Stack Overflow Help
stackoverflow.com/questions/tagged/font-awesome
Support
fontawesome.com/support
Unsplash
2013
Home
unsplash.com
Docs
unsplash.com/documentation
Repo
github.com/unsplash/datasets
Topic
github.com/topics/unsplash
View Unsplash Resources & Information
Developer Portal
unsplash.com/developers
Unsplash Dataset
unsplash.com/data
Unsplash Blog
unsplash.com/blog/
GitHub Organization
github.com/unsplash
View Unsplash Support & Community
Unsplash Support
unsplash.com/community
Unsplash Community
help.unsplash.com/en/
🖇️ Additional Resources & Learning Materials
Resource Title
Resource Description
Link Type
Link to Resource
Git and GitHub Tutorial for Beginners
Beginner's Introduction to Git and GitHub by Kevin Stratvert on YouTube
Video
https://youtu.be/tRZGeaHPoaw?si=RnK9nCUEVb-aWjDb
Git for Everybody: How to Clone a Repository from GitHub
Example on How to Clone a GitHub Repository by Coding For Everybody on YouTube
Video
https://www.youtube.com/watch?v=CKcqniGu3tA&feature=youtu.be
📜 License Details
The content within this repository was created as part of a personal educational project, following the React 18 Tutorial and Projects Course by John Smilga on Udemy. This repository is intended for personal use only and serves as a record of my learning progress. This repository & the content within it are not intended for commercial use, distribution, or replication. All rights to the original course content and methodologies belong to the respective copyright holders.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
Copyright © 2024 Jordan Muller. All Rights Reserved.