Introduction

In this blog post, we will walk through the creation of a feature-rich cloud storage website using React. The site, inspired by Fylo, offers sections such as Home, Features, How It Works, Testimonials, and a Footer. Along the way, we will discuss the structure, components, and styling used to build this fully responsive website.

Project Overview

This project consists of multiple sections aimed at showcasing a cloud storage service. Each section is built with React components for modularity and ease of maintenance. We will cover the following sections:

• Navbar
• Home
• Features
• How It Works
• Testimonials
• Footer

Features

• Responsive design: The website adjusts to different screen sizes.
• Modular Components: Each section of the website is a separate React component, making it easy to maintain and extend.
• Reusable Assets: Images and other assets are imported once and reused across components.
• CSS Styling: The website uses custom CSS to style each component.

Technologies Used

• React: Component-based front-end library.
• CSS: For styling the layout and appearance.
• JavaScript: Core logic for React components.
• SVG Images: Used for icons and graphics to enhance the UI.

Project Structure

fylo-cloud-storage-website/
│
├── public/
│   ├── index.html
│
├── src/
│   ├── assets/
│   │   ├── images/
│   │   │   ├── icon-access-anywhere.svg
│   │   │   ├── icon-security.svg
│   │   │   ├── illustration-intro.png
│   │   │   └── ...
│   ├── components/
│   │   ├── Navbar.js
│   │   ├── Home.js
│   │   ├── Features.js
│   │   ├── Working.js
│   │   ├── Testimonials.js
│   │   └── Footer.js
│   ├── App.js
│   ├── App.css
│   └── index.js

Installation

1. Clone the repository:

   git clone https://github.com/abhishekgurjar-in/fylo-cloud-storage.git

1. Install dependencies:

   cd fylo-cloud-storage-website
   npm install

1. Run the application:

   npm start

The website will be available on http://localhost:3000/.

Code Explanation

1. App.js

This is the root component that imports and renders all the other components (Navbar, Home, Features, Working, Testimonials, Footer).

import "./App.css"
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Features from "./components/Features";
import Working from "./components/Working";
import Testimonials from "./components/Testimonials";
import Footer from "./components/Footer";

const App = () => {
  return (
    
      
      
      
      
      
      
    >
  );
};

export default App;

2. Navbar Component

The navigation bar contains the logo and three clickable links: Features, Team, and Sign In.

import logo from "../assets/images/logo.svg";

const Navbar = () => {
  return (
    

      

        
      
      

        Features
        Team
        Sign In
      
    
  );
};

export default Navbar;

3. Home Component

The Home section introduces the service with an eye-catching background image and a "Get Started" button.

import bgHome from "../assets/images/illustration-intro.png";

const Home = () => {
  return (
    

      

        
      
      

        
All your files in one secure location, accessible anywhere.
        

          Fylo stores all your most important files in one secure location.
          Access them wherever you need, share and collaborate with friends
          family, and co-workers.
        
        

          
Get Started
        
      
    
  );
};

export default Home;

4. Features Component

This component highlights four key features of the cloud service, with corresponding icons and descriptions.

import AccessImage from "../assets/images/icon-access-anywhere.svg";
import SecurityImage from "../assets/images/icon-security.svg"
import collaborationImage from "../assets/images/icon-collaboration.svg"
import storageImage from "../assets/images/icon-any-file.svg"

const Features = () => {
  return (
    

      

        

          
          
Access your files, anywhere
          

            The ability to use a smartphone, tablet, or computer to access your
            account means your files follow you everywhere.
          
        
        

          
          
Security you can trust
          

          2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files.
          
        
      
      

        

          
          
Real-time collaboration
          

          Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required.
          
        
        

          
          
Store any type of file
          

          Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all file types to be securely stored and shared.
          
        
      
    
  );
};

export default Features;

6. Testimonials Component

This section includes feedback from satisfied users along with their profile images.

import satish from "../assets/images/profile-1.jpg";
import Bruce from "../assets/images/profile-2.jpg";
import Iva from "../assets/images/profile-3.jpg"

const Testimonials = () => {
  return (
    

      

        

          

            Fylo has improved our team productivity by an order of magnitude.
            Since making the switch our team has become a well-oiled
            collaboration machine.
          
          

            

              
            
            

              
Satish Patel
              
Satish Patel Founder & CEO, Huddle
            
          
        
        

          

            Fylo has improved our team productivity by an order of magnitude.
            Since making the switch our team has become a well-oiled
            collaboration machine.
          
          

            

              
            
            

              
Bruce McKenzie
              
Bruce McKenzie Founder & CEO, Huddle
            
          
        
        

          

            Fylo has improved our team productivity by an order of magnitude.
            Since making the switch our team has become a well-oiled
            collaboration machine.
          
          

            

              
            
            

              
Iva Boyd
              
Iva Boyd Founder & CEO, Huddle
            
          
        
      
      

        
Get early access today
        
It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you.
        

          

            
          
          

Get Started For Free 
          
        
      
    
  );
};

export default Testimonials;

7. Footer Component

The footer contains contact information, social links, and site navigation.

import Logo from "../assets/images/logo.svg" 
import Location from "../assets/images/icon-location.svg"
import phone from "../assets/images/icon-phone.svg"
import email from '../assets/images/icon-email.svg'
const Footer = () => {
  return (
   

    

     

      
     
      


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
      
    
    

      

        
        
 1-543-123-4567
      
      

        
        
[email protected]
 
Made with ❤️ by Abhishek Gurjar
      
    
    

      
About Us
      
Jobs
      
Pres
      
Blog
    
    

      
Contact Us
      
Terms
      
Privacy
    
   
  )
}

export default Footer

Live Demo

You can check out the live demo of this project here.

Conclusion

In this post, we created a feature-rich, responsive website using React, showcasing a cloud storage service. We covered how to structure the project, break down the components, and style them using CSS. This modular approach makes it easy to add or update features as needed.

Credits

This project is inspired by the Fylo cloud storage service design.

Author

Abhishek Gurjar is a dedicated web developer passionate about creating practical and functional web applications. Check out more of his projects on GitHub.