Weekdev #2 | Visualize SpaceX launches

By Mikhael Bailly

🚀 Intro

Welcome to the second edition of WeekDev 2021. The WeekDev is a challenge that I launched myself, where I develop an idea in maximum 1 week. At the end of this period I would no longer edit the code ! The goal is to improve myself in development and discover new techniques, new languages.

SpaceX Visualizer

This website will represent the different launches of SpaceX rockets

Table of Contents

1. Informations
2. Datas
3. Tasks
4. Tools used
5. Installation
6. Configuration
7. Usage
8. Result

Informations

The challenge began on Thursday 22 January 2021 and will be ended on Thursday 29 January 2021 ! It aims to bring me knowledge in NextJS, DataVisualization and Scroll animations.

Datas

The data comes from the public API of SpaceX

• https://api.spacexdata.com/v4/launches to get the real time launches data

Tasks

I created a Kanban table to reference all my tasks available here. It will be regularly updated
Main tasks :

• Animate all datas
• Display launches
• Optimize pages rendering
• Responsive

Tools used

• NextJS
• SpaceX API
• MagicScroll
• Tweenmax
• Tailwindcss
• Slick

Installation

Use git clone to install this app.

git clone https://github.com/Mikheull/wd-spacex
npm install

Configuration

No configuration required.

Usage

npm run dev

Result

I explain in more detail the development of this app in the wiki here

Here is the result after 1 week :