Crafting React Portfolios - Unleashing Creativity with Public APIs

This is my personal account of working with React and my experiences in developing website projects, conducting experiments, and building portfolios in the past, with a focus on the front-end aspect. React is an incredibly powerful JavaScript library that has revolutionized the way we approach web development. It offers a flexible and efficient way to create dynamic user interfaces, making it a popular choice among developers.

In summary, React offers an excellent framework for developing captivating portfolio projects. With the wide availability of public APIs and the flexibility of React, you have the tools to create outstanding web applications that showcase your talents and expertise in front-end development. By incorporating React into your portfolio, you can demonstrate your ability to create visually appealing, interactive, and dynamic user interfaces that leave a lasting impression on potential employers and clients. Here are some of my personal projects:

React Comic Marvel Application

I am a fan of Marvel and this is a sample of how to make an application on your favorite Marvel comic books. They have official Public APIs with a rate-limited of 3000 calls per day also provide very nice and clear documentations. Demo. This application uses React and Redux to display data from Marvel public APIs. Here is the source code in GitHub.

HackerNews React Clone

HackerNews provide a nice near real-time data Public API for people to use. This is perfect for getting started on experiments on your React project. There are several endpoints for use and documentation to get started or visit the official docs. Here is one version from me with the source code and the other one made with Tailwindcss React App.

The MovieDB React Application

The Movie DB are community built with TV and Movies database. This is showed how the community powers could bring you.

React Pokemon App

Poke API is an API with listings of pokemon and the detail about their character. This is really useful to learn some basic of React application workflow. See this demo.

React Admin Dashboard Template

One thing to show on your portfolio is when you have done an admin dashboard template for a project. Admin dashboard is always used in any company for their internal application system or just a simple CMS for their website.

A React Bootstrap will be a fine for you to start since Bootsrap is a popular CSS Framework that almost of developers use it in their project. Here is on of the portfolio on React Bootstrap admin template. You might be tempted to use Next.js (React.js Server Side Rendering version) with Boostrap version

Reactjs? use Vuejs instead

Gerimis App is an OpenWeatherApi API written in VueJS with several features includes geolocation that includes the weather around it. Good start for creating geo-location weather apps. Here is the source code link.

Or probably using NuxtJS the SSR of VueJS just like this website, featured with SEO and static site content generated with Markdown. Well, even this blog site generated with NuxtJS markdown static content.

Do you not want to use public APIs?

Well, if you do not want to use public APIs, you can start with template web development. You can start by using popular framework libraries such as React MUI (Material UI) or Chakra UI for React or Vue for the UI. This is very useful for showcasing your portfolio and skills, which can be handy in the future for job offers or as an additional side hustle. You can find more information on starting a side hustle for web developers in our blog: "How to Start a Side Hustle for Web Developers."

Publish your Website

There are several ways to deploy your website, you could use any hosting service provider or use free static website hosting like Vercel and Netlify.

I have been using these hosting service provider for quite some time for publish several of my web projects. As a web developer, these hosting providers have been extremely helpful in terms of hosting my static websites.

Thank you for reading the post about React Portfolios from Public APIs. I hope these will inspire you well enough for your next portfolio.