Virtualizer Application

This is an application that virtualizes list from a server without any downtime after load.

API Reference

Get all items

  GET https://public.opendatasoft.com/api/records/1.0/

Parameter	Type	Description
api_key	string	Required. Key value amount

Get item

  GET https://public.opendatasoft.com/api/records/1.0/search/?dataset=modis_c6_global_7d&q=&rows=${dataAmount}

Parameter	Type	Description
Amount	string	Required. Amount of item to fetch

dataAmount

Takes the amount

Badges

Add badges from somewhere like: shields.io

Color Reference

Color	Hex
Primary Color	#ba7dff
bG-Color light	#6E2FB5
primary light	#e1f5fe
bG-Color dark	#361758

Deployment

Link: Virtualize

Features

• dark Mode
• Scroll to top
• Speed Scroll
• Loader animation
• Fullscreen mode
• Cross platform

🚀 About Me

I'm a full stack developer...

🔗 Links

Other Common Github Profile Sections

👩‍💻 I'm currently working on MetaChat

🧠 I'm currently learning Vuw.js, three.js

👯‍♀️ I'm looking to collaborate on blockchain projects

🤔 I'm looking for help with...

💬 Ask me about anything Frameworks

📫 How to reach me linkedin

😄 Pronouns He/Him

⚡️ Fun fact I love getting thing done

🛠 Skills

Javascript, HTML, CSS, React.js, Docker, Webpack

Installation

Install virtualize with npm

  npm install virtualize
  cd virtualize

Install packages

  npm install

Logo

Optimizations

Optimized display rendering, to fetch data but not load, until scroll actions. Optimized scroll to top feature for all browsers and screens

Roadmap

• Initialize project using Create React App
• Create file and folder structures for App
• Pull data from API and test Render
• Style table and table content
• Set loading state for first Render
• Add Scroll design
• Fix CSS border styling
• Add scroll to top and Logo
• Change scroll thumb color
• Speed up loader and resize container
• Resize table container
• Improve loader animation text

Design choices

• Color choice is a rarely used dark mode feature for lists, reason for color is to make list look more attractive
• Choice of Language is React chose this because is Widely used and it is very easy to implement

Challenges faced

• Had challenges trying to figure out the best way to render list without down time, considering I can't use any external Library for that. So, on my research I had to make sure I was optimizing every feature in the Application, from fetching data, making code light weight, and using CSS "content-display: auto;" to improver performance

Run Locally

Clone the project

  git clone https://github.com/davidadeola/virtualize.git

Go to the project directory

  cd virtualize

Install dependencies

  npm install

Start the server

  npm start

Screenshots

Loading State

FIrst Render

Support

For support, email [email protected] .

Tech Stack

Client: React, CSS, JavaScript

Server: API