An open API service indexing awesome lists of open source software.

https://github.com/sheshanfernando2021/dev4side_sheshan_frontend


https://github.com/sheshanfernando2021/dev4side_sheshan_frontend

authentication javascript reactjs

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README

          

# 🚀 Simplified Task Board - Frontend

Welcome to the **Simplified Task Board** frontend — a mini Trello/ToDo app to manage personal tasks divided into lists.

---

## ✨ Overview

Built with **React.js** ⚛️ and **Vite** ⚡, this responsive app lets you:

- 🔐 Log in (JWT authentication)
- 📋 View all task lists
- 📝 View, create, edit, delete tasks in lists
- 🔄 Change task status: *To do*, *In progress*, *Completed*

State management via React Context API, routing with React Router, and styled with SCSS. Optionally uses a UI Kit like Bootstrap or Fluent UI for a clean look.

---

## 👤 Demo Credentials

Use these to log in immediately:

| Email | Password |
| ------------------ | -------- |
| dev4side@milano | 1234 |

You can create as many accounts as you want — all accounts, tasks, and lists are securely saved in the database.
For convenience, some demo accounts with preloaded tasks and lists are already available, so you can start testing right away without registering a new account (optional).

---

## 🛠️ Tech Stack

- ![JavaScript](https://img.shields.io/badge/-JavaScript-F7DF1E?logo=javascript&logoColor=black) **JavaScript**
- ![React](https://img.shields.io/badge/-React-61DAFB?logo=react&logoColor=black) **React.js**
- ![React Router](https://img.shields.io/badge/-React_Router-CA4245?logo=react-router&logoColor=white) **React Router**
- ![npm](https://img.shields.io/badge/-npm-CB3837?logo=npm&logoColor=white) **npm**

---

## 📦 Prerequisites

- Node.js (v16 or newer recommended)
- npm or yarn package manager

---

## ⚡ Getting Started

1. Clone this repo:

```bash
git clone https://github.com/SheshanFernando2021/Dev4Side_sheshan_frontEnd.git
cd Dev4Side_sheshan_frontEnd.git
```

2. Install dependencies:

```bash
npm install
# or
yarn install
```

3. Run the dev server:

```bash
npm run dev
# or
yarn dev
```

4. Open in your browser at:

```
http://localhost:5173
```

---

## 🎯 Features

- 🔐 JWT-based login and logout using a .NET backend API
- 📋 Manage lists: view, create, delete
- 📝 Manage tasks: view, create, edit, delete
- 🔄 Change task status easily
- 📱 Responsive design
- ⚛️ React Context for state
- 🌐 React Router for navigation

---

Made with ❤️ by Sheshan