About this Repository

Welcome to my GitHub Practice repository, where I document my journey of learning and practicing JavaScript, React, Unit Testing, Web Security, and more! Here, you will find a collection of code snippets, projects, notes, and resources that I have accumulated. My goal with this repository is not only to improve my skills but also to share my knowledge with others who are also interested in these topics.

Projects

1. Landing Page - (Live Demo / Source) This project is a simple landing page created with HTML, CSS, and Flexbox as part of The Odin Project's curriculum. It was a simple project to get familiar with everyday developer tools like VSCode, Git and GitHub, and CLI while building knowledge in HTML and CSS.
2. Registration Form - (Live Demo / Source) This project is a fully responsive registration form with client-side validation. Client-side validation is excellent for UX; However, since JavaScript can be disabled and bypassed, validation and sanitization must happen serverside to protect the database from malicious injections. This project aimed to build fundamental knowledge of HTML, CSS, JavaScript, and web security.
3. Time Calculator - (Live Demo / Source) This project is a simple HTML, CSS, and JS time calculator web application that allows users to determine how long ago a specific date was in days, weeks, months, or years. The goal of this project was to practice JavaScript date manipulation, switch statements, and provide a user-friendly way to calculate time differences.
4. Planet Components (Live Demo / Source) In this React project, the goal was to dynamically generate components on page by mapping over data in an array of objects vs. displaying them statically.
5. Course Ratings - (Video Demo / Source) This project is a simple React application that displays course cards and allows users to rate them using star ratings. The goal of this project was to practice using React state and get familiar with React Dev Tools to debug projects.
6. Scoreboard - (Live Demo / Practice CDN Source / React App Project Repo) This project explored important concepts in React, such as component hierarchy, state management, prop passing, and breaking down the UI into a modular component hierarchy to make a codebase that's accessible and maintainable. Through effective state management, I avoided common pitfalls such as memory leaks. Additionally, I gained experience in passing props between components without triggering unnecessary re-renders. I deployed this project to Netlify directly from its GitHub repo.
7. Course Directory - (Video Demo / Source) This React app project explores the use of React Router for routing and navigation. It covers concepts such as creating routes with React Router, using NavLinks for active link styling, dynamic and descendant routing, 404 Not Found routes, and programmatically navigating routes using hooks.
8. Custom Theme - (Live Demo / Source) in this workshop we leveraged the React context API to manage application state in a more scalable and predictable way. Learned to identify where it's best to use context, initialize a new context. By the end of the workshop, I left with a solid understanding of how to use the Context API to efficiently manage and pass data to all the components of my React app.
9. GitHub Pull Requests Viewer - (Live Demo / Source) This project is a simple, responsive web application that displays the latest GitHub Pull Requests for a specific user. It features client-side fetching of Pull Requests using the GitHub API, dynamic rendering of user data, and the ability to load more Pull Requests by clicking a "Load More" button. The goal of this project was to practice asynchronous JavaScript, DOM manipulation, and fetching data from an API.
10. WordPress Posts with React - (Video Demo / Source) This project demonstrates integration of a React app with the WordPress REST API to fetch and display blog posts in a grid layout, and enables navigation to single post views using react-router-dom. The goal was to practice fetching data, like the posts lists and single posts, with Axios from a WordPress site utilizing the WP REST API.

Miscellaneous:

• React - (source) this a collection of projects to practice React basics like rending components, practicing state, and mapping over data to dynamically display commponents.
• Tampermonkey Scripts - (source) This a collection of Tampermonkey scripts I created to make the UX better for daily work.
• Javascript - (Source) here I've practiced various things like array-object-methods and displaying the date and time using JavaScrit.
• Jest Testing - (Source) this is a collection of Javascript code snippets and corresponding Jests tests I complete while working through TOP's Test Driven Development Lesson.
• Notes - (Source) - I mostly share notes on ash1eygrace.com, but if I don't have time to edit something, it'll be dropped here.