Here you will find all the projects that I completed along with their GitHub Repo. This was a great course that taught me so much.
The course consisted of 40 lessons and 12 projects. Some of the concepts I learned:
- Reviewing and learning concepts such as:
- Using Vanilla JS to make UIs
- DOM manipulation
- Factory functions and the module pattern
- OOP Principles
- Webpack and npm
- Asynchronous JavaScript
- Frameworks (React and Vue)
- Unit Testing (Jest)
This was not taught in class, but I went out of my way to practice other technologies and concepts that are needed to be a Frontend developer
- Firebase
- React Context
- Styled Components
- Material UI
- React Bootstrap
- Dribble (For design inspiration)
- Gatsby Framework
- Redux
- Setting up projects with ESLint and Prettier
- About:
- Implementation:
- Used HTML, CSS, JavaScript to complete project
- Used Object constructors to create new library instances and organize code
- Built with Firebase for data storage
- About:
- Implementation:
- Used HTML, CSS, JavaScript to complete project
- Used JavaScript Factory functions to organize code
- About:
- Implementation:
- Used DOM manipulation to dynamically render the entire contents of the website
- Built with JavaScript Factory functions to organize code.
- Practice using NPM and Webpack
- About:
- Implementation:
- Used DOM manipulation to dynamically render the entire contents of the website
- Built with JavaScript Factory functions to organize code.
- Practice using NPM and Webpack
- Designed with LocalStorage to maintain storage of projects & tasks
- About:
- Implementation:
- Built using Vue.js. Used async/await to fetch data from the Open Weather Map API
- Built with JavaScript factory functions to organize code
- About:
- Used Jest to practice creating tests for a series of problems that include:
- A capitalize function that takes a string and returns it with the first character capitalized.
- A reverseString function that takes a string and returns it reversed.
- A calculator object that contains functions for the basic operations: add, subtract, divide, and multiply. Each of these functions should take two numbers and return the correct calculation.
- A caesarCipher function that takes a string and returns it with each character “shifted”. Read more about how a Caesar cipher works on this website.
- An analyzeArray function that takes an array of numbers and returns an object with the following properties: average, min, max, and length.
- Code
- About:
- Implementation:
- Used Jest to implement Test Drive Development. First I created tests to see if the logic worked, then I focused on the UI
- Implemented project using React. Created reusable components and CSS selectors
- Used useLayoutEffect to help render the application again when I am trying to make changes to the DOM
- useRef when trying to use state values inside event listeners
- About:
- Implementation:
- Used React, React Bootstrap, and Sass to complete the project. Used Surge.sh to deploy
- Learned what Lexical Scope is and how it is used in react. We can use arrow functions to not lose access to calling functions
- Used React, React Bootstrap, and Sass to complete the project. Used Surge.sh to deploy
- About:
- Implementation:
- Practice using Gatsby for the first time!
- Used React Hooks and LifeCycle methods to organize and implement logic. Sass for styling
- About:
- Implementation:
- Used Redux & Gatsby to create applications.
- Took advantage of Gatsby's dynamic routing & awesome page directory system to organize code and implement logic
- About:
- Implementation:
- Used Gatsby, Material UI, and Styled Components to create the project.
- Built with Firebase to store scores of all users who have played. Also, Firebase hosting to deploy and host
- About:
- I challenged myself to create something new, something that could help people. As I was thinking, I realized that something that I value and that has helped me a lot is the power of reflection. Reflecting allows people to stop and think about what they are doing. Helps clarify what are the next steps you want to create and take. I wanted to create a tool that people can use to reflect. This is how Your Story was born!
- Code
- Live Site
- Implementation:
- Developed a full-stack application that lets users create, edit, delete, and print to PDF their newly created events timeline. Implement authentication using Firebase
- Used Gatsby.js, Material UI, Styled Components, and Firebase (Real Time - DB, Auth, Hosting) to complete the project