Planets fact site with animated solar system built with ReactJS.

Related tags

planets-fact
Overview

Frontend Mentor - Planets fact site

Design preview for the Planets fact site coding challenge

Table of contents

Overview

Intro

Hello! This is my solution to Planets fact site - Frontend Mentor. This is my second project build with React JS. This time I had the opportunity to try styled-components. It is a very powerful tool, but I believe it takes time to learn good practices and organize the code. Right now, I have the feeling that my styles are chaotic but I'm looking forward to correct it and use styled-components to its full potential. In order not to stick to design, I decided to recreate the animated solar system as the home page. Additionally, I added transitions while the subpage/route change.

Featured solution in Vol. 58 of the Frontend Mentor Newsletter.

The challenge

Your challenge is to build out this 8-page planets fact site and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

If you choose to use a JS-heavy approach, we provide a local data.json file for the planets. This means you'll be able to pull the data from there instead of using the separate .html files.

Your users should be able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • View each planet page and toggle between "Overview", "Internal Structure", and "Surface Geology"

Links

My process

Built with

  • ReactJS
  • Webpack
  • Styled-components
  • Mobile first
  • Semantic HTML5 markup
  • JavaScript
  • Flexbox
  • Grid
  • Framer Motion API

Features

  • I used ReactJS library to create an app. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
  • I tried to write a project using styled-components library. Styled Components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page. Also allows you to write plain CSS in your components without worrying about class name collisions.
  • The first time I used Prettier. Prettier is an opinionated code formatter. It removes all original styling and ensures that all outputted code conforms to a consistent style.
  • To animate the pages transitions and mobile-menu animations I used Framer Motion API. Framer Motion is an open source, production-ready library that's designed for creating creative animations.
  • Added counter() function for my pseudo-elements content in Tab button. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage.
  • The solar system was recreated from this great Codepen created by Malik Dellidj. It's all based on div rotation with pseudo-elements inside that contains the images of the planets.
  • Implemented defer to my script tag. The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script is fetched asynchronously, and it’s executed only after the HTML parsing is done.
  • Implemented prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief.
  • :focus-visible pseudo class. This selector only indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device. It isn't supported by Safari yet, but there is simple workaround.
  • Tried to create more accessible mobile navigation. Used the aria-expanded and aria-controls attributes.
  • To create this project I used webpack. More specifically i used laravel mix which is a wrapper for webpack and targets the 80% usecase.

Setup

To run this project, clone it and install it locally using npm:

$ git clone [email protected]:tediko/planets-fact.git
$ cd planets-fact
$ npm install

Use npm to build and compile assets in a local environment:

$ npm run build

Watch assets for changes and rebuild your bundle each time you update a file with:

$ npm run mix-watch
or
$ npx mix watch

Useful resources

A static site generator powered by Deno + React

A static site generator powered by Deno + React

xcatliu 1.2k Sep 20, 2021
A superhero encyclopaedia made in React Native. Pulls from the SuperHeroAPI & ComicVine API

A superhero encyclopaedia made in React Native. Pulls from the SuperHeroAPI & ComicVine API

Gino Swanepoel 27 Sep 17, 2021
Kanmail - An email client that functions like a kanban board, for Mac/Windows/Docker

Kanmail - An email client that functions like a kanban board, for Mac/Windows/Docker

Oxygem 980 Sep 20, 2021
Simple, powerful online communities.

Simple, powerful online communities. This is the main monorepo codebase of Spectrum. Every single line of code that's not packaged into a reusable lib

Spectrum 10.1k Sep 19, 2021
Winamp 2 reimplemented for the browser

Webamp A reimplementation of Winamp 2.9 in HTML5 and JavaScript with full skin support. As seen on TechCrunch, Motherboard, Gizmodo, Hacker News (1, 2

Jordan Eldredge 8.1k Sep 16, 2021
A demo of a Shopify site using Astro and React.

A demo of a Shopify site using Astro and React.

Cassidy Williams 52 Sep 22, 2021
A minimal operating system created with ReactJS

mindows A minimal Operating System created with React. About This project provides a minimal Windows 10 experience in browser. It runs completely on c

Piyush Madhusudan 83 Sep 13, 2021
React Weather App - A simple weather app that allows you to get current weather information

React Weather App - A simple weather app that allows you to get current weather information

Kirill Bukovski 0 Sep 23, 2021
A simplified Jira clone built with React/Babel (Client), and Node/TypeScript (API). Auto formatted with Prettier, tested with Cypress.

A simplified Jira clone built with React and Node Auto formatted with Prettier, tested with Cypress ?? Visit the live app | View client | View API Wha

Ivor Reic 7.4k Sep 18, 2021
Astro is a fresh but familiar approach to building websites.

Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default.

Snowpack 7k Sep 22, 2021
A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Özge Coşkun Gürsucu 23 Aug 12, 2021
Node.js and mongoDB Google Drive Clone

MyDrive MyDrive is an Open Source cloud file storage server (Similar To Google Drive). Host myDrive on your own server or trusted platform and then ac

null 2.5k Sep 23, 2021
Build a fully functional eCommerce application using commerce.js.

This is a code repository for the corresponding video tutorial. In this video, we're going to build a fully functional eCommerce application using commerce.js.

Adrian Hajdin - JavaScript Mastery 1k Sep 17, 2021
🍞 Jam is your own open source Clubhouse for mini conferences, friends, communities

Jam ?? Jam is an open source alternative to Clubhouse, Twitter Spaces and similar audio spaces. With Jam you can create audio rooms that can be used f

Jam 201 Sep 18, 2021
A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

Özge Coşkun Gürsucu 22 Sep 15, 2021
Responsive React 'The Movie Database' (TMDb) App

TMDb Movie Search TMDb Movie Search is a responsive React app that utilises Twitter's typeahead.js and Bloodhound suggestion engine, loading data via

Stephen Kempin 856 Sep 12, 2021
Built with Expo, React Native, and GraphQL, Lexicon is a pre-built mobile discussions app that you can customize for your users.

Lexicon is a customizable, open source mobile app that provides an elegant mobile discussions experience. Built on top of Discourse, a platform for communities.

null 117 Sep 18, 2021
YouTube clone is a replica made by me from scratch of the well known online video sharing and social networking platform.

a replica made by me from scratch of the well known online video sharing and social networking platform.

Lucas Ferrari 4 Sep 21, 2021
A clone of Google Keep with its original Material Design aesthetics

A Clone of Google Keep A minimal Clone of Google Keep written in ReactJS with Material UI Components, themed to look exactly like Google Keep, with co

Merbin J Anselm 404 Sep 22, 2021