Frontend Mentor - Fylo data storage component solution

This is a solution to the Fylo data storage component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • How to use
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Screenshot

Desktop

Mobile

Links

• Solution URL: GitHub
• Live Site URL: Netlify

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Framer Motion - React animation library

What I learned

• Framer Motion library

How To Use

Use

Only visit demo url.

Modify code

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/im-victor-mendez/fylo_data_storage_component.git

# In terminal locate inside the location where the repository was cloned

# Install dependencies
npm install

# Build app
npm run build

# Run app
npm run preview

Author

• LinkedIn - in/im-victor-mendez
• Frontend Mentor - @im-victor-mendez
• GitHub - @im-victor-mendez