react-ultimate-resume

react-ultimate-resume is an open-source, customizable software developer resume template built by WeLoveDevs.com that turns a JSON Resume document into an animated, card-based web profile. It takes a stringified JSON Resume as its data input and outputs a responsive React single-page resume; in "edit" mode it also generates a customization UI for updating the JSON directly in the browser. The project runs on create-react-app and is distributed as an npm package (@welovedevs/react-ultimate-resume) as well as a GitHub template that can be forked and deployed. The platform is developed by WeLoveDevs.com, a developer job marketplace, and is released under the GNU AGPL v3 license.

What is react-ultimate-resume?

react-ultimate-resume is an open-source developer resume template that renders JSON Resume data as a modern, animated card-based website. Its input is a JSON Resume object (optionally extended with developer-specific fields) and its output is a fully responsive React web page. The template runs on create-react-app, is developed by WeLoveDevs.com, and can be used as a standalone resume site or embedded inside another React application.

Key Features

• Ten resume cards — Basics, Skills, Dream job, Experiences, Studies, Projects, Hobbies, Music, Interested by, and Languages each display a different section of the JSON Resume, with Hobbies and Music supporting GIFs and a Spotify playlist embed.
• In-app JSON editor — Every card opens an edit dialog that lets you modify the underlying JSON Resume data without leaving the site, and a readOnly mode disables editing for production profiles.
• JSON Resume standard plus extra fields — Extends the community JSON Resume schema with developer-specific fields such as visaSponsorship, codingYears, codingReason, searchState, contractTypes, remote frequency, studiesLevel, personalDescription, and an interestedBy list of technologies.
• Customization palettes — A built-in set of color palettes changes the resume's visual theme, and the current customization is exposed through an onCustomizationChanged callback.
• npm package integration — You can install the resume component inside an existing React app with npm i @welovedevs/react-ultimate-resume and import it as DeveloperProfile.
• i18n support — The resume interface is available in English, French, and Turkish, with translation files open to community contributions.
• Free hosting on WeLoveDevs.com — Registering on welovedevs.com gives developers a free subdomain for their resume, with server-side rendering, HTTPS, reCAPTCHA v3, and Cloudflare protection.

Who should use react-ultimate-resume?

• Software developers — developers looking to present their skills, experience, and projects in a more visually engaging way than a traditional PDF resume, with animations and card layouts.
• Job seekers in tech — candidates who want recruiters to immediately see their dream job, availability state (activelySearching, openOpportunities, etc.), and visa sponsorship needs through dedicated fields.
• Front-end developers / React users — developers comfortable with React and JSON who want to fork the create-react-app project or embed the npm component in their own portfolio site.
• Open-source contributors — the project welcomes PRs, and contributors have built extensions like web-develop.me (linked in the README).

What can you do with react-ultimate-resume?

• Create a modern developer resume: feed your JSON Resume data to the template and get a fully animated, card-based profile that you can share or embed.
• Edit your resume visually: use the in-app edit dialogs to update skills, experiences, and projects without editing JSON files by hand.
• Deploy under your own domain: fork the repository, replace the data in /src/data/json_stub.json with your own JSON Resume, and deploy the result to any static hosting service; docs include a dedicated "Deploy your fork" guide.
• Customize colors and media: switch between color palettes, add GIFs to hobbies via a Giphy API key (edit mode), and embed a Spotify playlist through the sound.embedUrl extra field.

How does react-ultimate-resume work?

Start by forking the repository and running yarn install and yarn start to launch the app on localhost:3000. Replace the default data in /src/data/json_stub.json with your own JSON Resume; because the template extends the standard schema, you can optionally add fields like dreamJob, codingYears, or searchState. To deploy, follow the HOW TO documentation for either WeLoveDevs.com hosting or your own server.

FAQ

Is react-ultimate-resume free?

Yes, react-ultimate-resume is open-source under the GNU AGPL v3 license, and the source is freely available on GitHub. WeLoveDevs.com also offers free resume hosting on a subdomain for developers who register on their site.

What data format does react-ultimate-resume use?

It uses the JSON Resume standard, a community-driven JSON schema for resumes, with additional extra fields defined by WeLoveDevs.com for developer-specific information such as visa sponsorship, coding years, remote work frequency, and job search state.

Can I use react-ultimate-resume inside my own React project?

Yes, you can install it as an npm package (@welovedevs/react-ultimate-resume) and import the DeveloperProfile component. The component accepts a mode prop ("edit" or "readOnly"), a JSONResume data prop, locale options, and API key/endpoint options for Giphy and Unsplash.

Which languages does the resume support?

The interface is currently translated into English, French, and Turkish. The project invites contributors to add new language translation files.

Does react-ultimate-resume require coding knowledge?

Yes, basic familiarity with React and JSON is helpful. Editing the resume data itself involves JSON files or the in-app editor, but customizing the layout or deploying to your own server will require running yarn commands and understanding the create-react-app structure.