https://github.com/charandvvk/user-directory
ReactJS-based Web Application developed as part of a hiring assignment by Teachmint.
https://github.com/charandvvk/user-directory
css3 html5 javascript-es6 react-js react-router-dom-v6
Last synced: 3 months ago
JSON representation
ReactJS-based Web Application developed as part of a hiring assignment by Teachmint.
- Host: GitHub
- URL: https://github.com/charandvvk/user-directory
- Owner: charandvvk
- Created: 2023-12-23T01:00:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-24T13:51:20.000Z (over 2 years ago)
- Last Synced: 2025-01-21T11:30:20.598Z (over 1 year ago)
- Topics: css3, html5, javascript-es6, react-js, react-router-dom-v6
- Language: JavaScript
- Homepage: https://user-directory-charandanda.netlify.app/
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# User Directory: ReactJS-based Web Application
This project is developed as part of a hiring assignment for a Frontend role at [Teachmint](https://www.teachmint.com/).
## Table of Contents
1. [Overview](#overview)
2. [Demo](#demo)
3. [Usage](#usage)
4. [Screenshots](#screenshots)
5. [Features](#features)
6. [Technologies](#technologies)
7. [Setup](#setup)
## Overview
This application interacts with the provided APIs shown below and displays a list of users, their posts, and an interactive world clock.
- [https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users) (GET users)
- [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts) (GET posts)
- [http://worldtimeapi.org/api/timezone](http://worldtimeapi.org/api/timezone) (GET time zones)
- [http://worldtimeapi.org/api/timezone/:area/:location[/:region]](http://worldtimeapi.org/api/timezone/Africa/Abidjan) (GET current time)
## Demo
You can experience a live demo of the application [here](https://user-directory-charandanda.netlify.app/), hosted on Netlify.
## Usage
1. Click on a user card on the home page to navigate to the user details page.
3. Click on the dropdown to pick a time zone for the clock.
3. Toggle the button on the top right to pause or resume the clock.
4. Click on a post card to open a popup, click outside the popup to close it.
5. Click on the "Back" button to return to the home page.
## Screenshots
- Home Page:
- User Details Page:
- Time Zones Dropdown:
- Post Content Popup:
## Features
- Clean and optimized business logic to reduce API calls.
- Unique routes to each user's details page.
- Data served via states, context, and a custom hook.
- Responsive UI, reusable and maintainable components.
## Technologies
- [HTML5](https://html.com/)
- [CSS3](https://css3.com/)
- [JavaScript/ES6](https://www.javascript.com/)
- [React Router](https://reactrouter.com/en/main)
- [React](https://react.dev)
## Setup
To get a local copy of the project up and running, follow these steps:
1. Launch your preferred command-line interface (CLI).
2. Clone the repository: `git clone https://github.com/charandvvk/User-Directory.git`
3. Change to the project directory: `cd User-Directory`
4. Install dependencies: `npm i`
5. Start the development server: `npm run dev`
6. Open your favored browser and navigate to http://localhost:5173.