Settings Page Application

About Project

This project is simple web page to display settings information.

Assumptions

  • I have assumed not data is provided and I created a local variable to store all the dummy data I used throughout the application

  • I implmented React Router for routing of the pages when clicked however since its only one page I am displaying, I used a single route(settings) for all the pages.

Application Features

-Settings page disply - Display of Sidebar -Display of billings table

Live view of the application Demo can be found here https://settings-page-cyan.vercel.app/ -

How to use the application

Table of Contents

Getting Started

Dependencies

The project is built with;

  • React JS -Library for building user interfaces
  • React-router v6 - Enables the to implementation of dynamic routing in a web app.
  • Tailwind CSS - A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Prerequisites

Ensure you have NodeJS installed by entering node -v on your terminal If you don't have NodeJS installed, go to the NodeJS Website, and follow the download instructions

Tools Required

The following tools are required to run this application:

  • A text editor like Visual Studio Code
  • Command Line

Getting the source code

You can clone the repository directly using this command: git clone git@github.com:jamesoyanna/settings-page.git OR clicking on the code button ontop to clone the application.

Installation

Installation steps:

Node.js and Yarn or Npm Your computer must have installed nodejs, and yarn to run this application You can download Node.js from https://nodejs.org and yarn from https://yarnpkg.com/lang/en/docs/install/ . NPM comes bundled with Node.js

Install Npm Packages

After clonning the application, to run the client application locally, you will have to install all the dependencies and packages. Open your terminal and navigate into the setting=page folder using the command: cd setting-page

Run yarn or npm install from the root of the folder.

Running the Application

Run yarn start or npm start from the root of the folder you cloned to start the development server. 
Go to http://localhost:3000 on your browser. Your app should be running.
The app will automatically reload if you make changes to any of the source files.

Author

James Oyanna

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes