Skip to content

JuanPabloDiaz/freecodecamp

Repository files navigation

FreeCodeCamp Collection Projects πŸ“š

Embark on my journey through freeCodeCamp’s legacy Front End Development Certification! These projects showcase my growth in HTML, CSS, JavaScript, Bootstrap, jQuery, Sass, React, Node.js, Git, and GitHub. From mastering responsive design with Bootstrap to building interactive functionalities with React, each project reflects my dedication for learning and experimentation.

While working on the requirements to obtain the certifications, I created multiple projects, each with its own GitHub repository and website. However, I wasn't satisfied with the result. After some time, I realized that merging them into a single repository would be a great idea. This project was thus conceived, aiming to improve user experience and consolidate a more robust portfolio.

freeCodeCamp repo

In this repository, you'll find the following projects to explore:

  • Tic Tac Toe ( View Demo | View Code ): A classic game of Tic Tac Toe with a twist: players can choose to play against a computer.
  • Simon Game ( View Demo | View Code ): A memory game that challenges players to remember a sequence of colors and sounds.
  • Drum Machine ( View Demo | View Code ): A drum machine that allows users to play sounds by pressing keys or clicking buttons.
  • Calculator ( View Demo | View Code ): A simple calculator that performs basic arithmetic operations.
  • Pomodoro Clock ( View Demo | View Code ): A productivity timer that helps users stay focused and productive.
  • Local Weather ( View Demo | View Code ): A local weather app that displays the weather in the user's current location by using the Geolocation API.
  • Twitch.tv JSON API ( View Demo | View Code: A Twitch.tv JSON API that displays the status of several Twitch.tv channels by using the Twitch.tv JSON API.
  • Random Quote Generator ( View Demo | View Code ): A random quote generator that displays quotes from famous people by consuming an API.
  • Wikipedia Viewer ( View Demo | View Code ): A Wikipedia viewer that allows users to search for articles on Wikipedia or view a random article. It consumes the Wikipedia API.
  • Markdown Previewer ( View Demo | View Code ): A markdown previewer that converts plain text into HTML. Allowing users to write in markdown and see the output as they type.

Get a glimpse into my technical capabilities and passion for front-end development!

Desktop View πŸ–₯️

iPad view πŸ“±

Mobile view πŸ“±

Lighthouse Score πŸš€

Features:

  • Responsive design: freecodecamp adapts to any screen size, ensuring a consistent and enjoyable experience for all users.
  • Sleek and modern UI: Tailwind CSS provides a beautiful and intuitive user interface.
  • Efficient and performant: Vite.js ensures fast loading times and a smooth experience.

Built With πŸ”‘

Welcome to the freecodecamp, collection.

React Vite Tailwind-CSS React-Router React-Icons

Here's a closer look at the tech stack:

  • Front-End: React.js, Vite.js, Tailwind CSS
  • Back-End: API
  • Deployment: Vercel

Get started πŸ› οΈ

To get started with freecodecamp, simply clone the repository and follow the setup instructions. You'll be up and running in no time!

Setup πŸ“‹

  1. Clone the repo
  2. Install dependencies
    npm install
  3. Start the development server
    npm run dev
  4. Open http://localhost:5173/ with your browser to see the result.

Useful Commands 🧰

  • Run before Deploy: $ npm run build
  • Check for errors: $ npm run lint
  • Run Prettier: $ npm run format
  • Run Lighthouse in local: $ npm run lighthouse

Contribution 🀝

All contributions are welcome. Please read the CONTRIBUTING guidelines for details on our code of conduct, and the process for submitting pull requests.

Contributors

License πŸ“œ

freecodecamp is licensed under the MIT License.

I hope you enjoy using the freecodecamp repo!

Other Projects πŸš€

Contact πŸ“ž

Acknowledgments πŸ“š

Resources list that I find helpful and would like to give credit to.

(πŸ‘† Top πŸ‘†)