This is a react project to help you get started on your open-source journey. All you need to do is to call any public API and show us its response in your react component. It could be quotes, cat images, bitcoin - anything. Design it the way you want! Complete your Hacktoberfest challenge this year.
Hacktoberfest is a global challenge organized by DigitalOcean. It encourages participation in giving back to the open-source community by completing pull requests and participating in events. You can sign up anytime between 1 and October 31. Pull requests can be submitted to this repo or any opted-in GitHub or GitLab repo. To get a T-shirt :tshirt:, you must make 4 approved pull requests (PRs). :tada:
After contributing you would find yourself familiar and more confident with
:heavy_check_mark: Basics of GitHub workflow :metal:
:heavy_check_mark: Basics of React and Tailwind :yellow_heart:
:heavy_check_mark: How to read API documentation and consume APIs :computer:
Here, we have mentioned the instructions to set up git. If you don't already know what Git is, check out this blog by FreeCodeCamp.
git config --global user.name "Your name"
git config --global user.email "Your email address"
API stands for Application Programming Interface. Imagine what happens at a restaurant :fork_and_knife: - You order your favorite food :pizza: ( Request ), the waiter serves your order when it's ready (API Response). You are not aware of how the food is prepared. Similarly, you request data from an API, and the API returns it to you. You need not be aware of what's happening behind the scenes. Now, anybody who knows where the restaurant is, and how to communicate with the waiter can place an order. Similarly, anyone can consume an API even computer programs :robot:.
Whenever you visit just-callling-random-api you would see a new quote, I could have manually created a list of 1000 quotes and picked up anyone at random but instead, I can just consume Quotable
API offered by FreeCodeCamp which saves me all the trouble of manually creating the list and offers way more quotes than I could have added.
There are amazing people out there, who have created a large number of awesome APIs - random Cat pictures :cat2: , random dogs pictures :dog:, breaking bad quotes, harry potter quotes, bitcoin prices :moneybag: , NASA space images, etc. You can find all of these and many more at Public APIs repository.
For this project, you need to pick up any API you like from this list, read about how you can use it, try calling it and understanding its response, and then consuming it your react components. We are extremely excited to see what API you choose and what you make with it! :tada:
React is a JavaScript library created for building fast and interactive user interfaces for web applications. It allows developers to create web applications that can change data, without reloading the page. Above all, it's simple and easy to learn. Here's a quick by Fireship.
We are also going to use React Hooks - These allow developers to use state inside a functional component. More about it -
To start with react you need to install NPM. If you don't have it installed on your system, then you need to head to the official Node.js website to download and install Node, which also includes NPM (Node Package Manager). Select the "Recommended For Most Users" button and download the current version for your operating system.
Tailwind is a utility-first CSS framework. For this project, we don't need to know about it in detail, but it would help you style your contribution if you understand the basics. To style a component, all you need to do is specify a tailwind class in its class name. Tailwind classes are very intuitive and you can find all of them in this cheat sheet. Tailwind is pretty awesome and you can know more about it here.
This would make a copy of this repository in your account. You will see <your_username>/just-calling-random-api
.
git clone <copied_url>
. This creates a new folder named "just-calling-random-api".npm install
or yarn install
to install all dependencies.npm start
or yarn start
to start the web app.These instructions will cover usage information and for the docker container.
In order to run this container you'll need docker installed.
# build docker image
$ docker build . -t just-calling-random-api:latest
# Run docker image
$ docker run -p 80:80 just-calling-random-api:latest
You can access the application in http://localhost
git pull
to update the changes in your local repo.git branch <your_branch_name>
- This creates a new branch. The branch name should be similar to the API name.git checkout <your_branch_name>
- Checkout to your branch. This helps you work in parallel but without disturbing files on the main branch.src/cards
folder.import React from "react";
function MyComponent() {
return <h2>Hi, This is my component.</h2>;
}
app.js
. Import and render the component you just created. Now when you do npm start
you should see a new component.<ContributorInfo username= [ Your name ] profilePic= [ Your profile pic URL ] />
<ApiInfo apiUrl= [ URL of API used ] > apiName= [ Name of API used ] />
git add .
- stage your changes.git commit -m <your commit message>
- commit changesgit checkout main
- checkout back to the main branchgit push --all
- push all changes to Github.Wait for it to get approved and merged. Awesome, you have made your first contribution. To make a further contribution, you need to create new branches. Your next contributions could be improvements to previous work or a new API call. Certain things may not work as expected, or you may have doubts about some steps mentioned above. Need not worry, just hop on to our gitter channel and ask.
List generated with contributors-img. [Updates every 24 hrs]