Three React Components (character customizer, calendar display, and streak display)

We need someone to create two components for our React application. Attached labeled mockups illustrate the following descriptions.

Character Customization of Pixel Avatars:

This component will have a customization menu and character preview. In the customization menu, the player can switch between different categories (ex: sword, hair etc.) and select different customizations (ex: sword type, hair color and style etc.). In the character preview, they can see what their avatar looks like with the selected item. If applicable, clicking any item should also display its name and description in a field below (ex: swords do have names and descriptions, hair has no additional name/description).

Items can be locked or unlocked. If an item is unlocked, clicking it should equip it. If it is locked, clicking it should not equip it. In addition to name and description, locked items should display cost and level to unlock. The next unlock-able item should have a buy button that is enabled if the player can afford the cost. Clicking this buy button should unlock and equip the item.

We will provide images, names, descriptions, etc. for each item and category.

All component wide data should be stored and handled with redux. The various items/customization categories should be dynamically loaded from a list in the reducer (so we can expand the customizations in the future). Lastly, the customized avatar should be its own component (so we can use it elsewhere in our product). Otherwise, the structure is up to you, but I've attached a diagram with an example of a component structure I think would work well.

Calendar Display:

The calendar display has two parts/milestones, the calendar and the streak visual. This component should be built to accept the following input: a list of objects, each composed of a datetime value and multiple integer values. The calendar on the left should look as pictured in the mockup, with the color of the dots corresponding to at least one of the integer values collected from the input object. Specifically, the dots should be grey if the integer value is 0 or undefined, and blue for any non-zero value, becoming darker blue the higher the respective value. Hovering over any bubble in either of the calendar or streak parts displays a tooltip with additional information. We're not done fully designing the streak visual, but we'll discuss this milestone further once we're finished.

Skills: Website Design, HTML, React.js

See more: display graph windows form application, display facebook images web application, display drupal node flex application, display tif windows forms application, web page wont display need java, display excel sheet web application, seam excel create components java, display numbers world map application, create components joomla hello world, flex display values database flex application, display system info vbnet application, rpg maker character customizer, display web pages cdc application, create components joomla tutorial movie, flex calendar year display, event calendar widget display, sugarcrm calendar module display, google calendar api display jquery, character customizer ue4

About the Employer:
( 0 reviews ) Tokyo, Japan

Project ID: #30990344

11 freelancers are bidding on average $491 for this job


Hi there! I have read what you exactly need and I have great experience with React.js, HTML and Website Design. However I would like to ask you a few questions. I do work smart and do not rest until I get the job done. More

$750 USD in 16 days
(28 Reviews)

Hello I have many experiences in React.js. I'm very interested in your project and will deliver you good result. Let's discuss further via chat. Thanks

$300 USD in 5 days
(6 Reviews)

[login to view URL] you are doing well. React expert is here. I have read your job description very carefully and I have understood what you want. I have rich experience in Front-end development using React/Redux/Javascript/Typ More

$300 USD in 7 days
(7 Reviews)

Hi, there. I have read your description carefully and I understand what you want. I have rich experience in React. I have developed several sites using it. Character Customization and Calendar Display pages; I can mana More

$1000 USD in 20 days
(3 Reviews)

Hello? I read your job posting carefully and understood what you want. I am very interest in this project. I am full stack developer and have rich experience with react.js, website design html, node.js. I can provide y More

$500 USD in 7 days
(4 Reviews)

Hi, Experience is the golden factor in this project where you find in me at least 6+ years of working experience over all the factors in your project. Using Higher-Order Components, I have built character, shop and ca More

$300 USD in 7 days
(1 Review)

I've read your project details and thought that I'm a proper person for this work. I would apprise you that I have extensive expertise in front-end and back-end development for dynamic web projects. I am a honest, exce More

$250 USD in 7 days
(0 Reviews)

Hi I am good web developer I have much experience in react. So I can create components you need. Please contact me and discuss more. Thank you.

$500 USD in 7 days
(0 Reviews)

Hi, I am a React JS TOP in the world. Thank you.

$500 USD in 7 days
(0 Reviews)

i have 2 years experience with JavaScript and a year experience with react.

$500 USD in 21 days
(0 Reviews)

Hi, Are you looking for a React Expert? I have great experience in React.js including Material UI design and Tailwind CSS. Also I am familiar to Redux state managment. As a full stack developer, not only frontend, but More

$500 USD in 7 days
(0 Reviews)