Reminder App (React + Typescript)

Table of Contents

• Introduction
• Prerequisites
• Getting Started
  • Installation
  • Configuration
  • Run the Project
• Project Structure
• OneSignal Integration

Introduction

The Reminder App is a web application designed to send push notifications for user reminders. It utilizes OneSignal for push notification services. Users also can create their daily tasks. The project is built using React and uses local storage to store data. Tailwind CSS is used for styling.

Demo URL

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js
• OneSignal Account with App ID and REST API Key

Getting Started

Installation

1. Clone the Repository:

 git clone https://github.com/Honey0908/Reminder-App

2. Navigate to the Project Directory:

cd Reminder-App

2. Install Dependencies:

 npm install

Configuration

Before running the project, set up your environment variables:

1. Create .env file in root Directory:

VITE_ONESIGNAL_REST_API_KEY=your_onesignal_rest_api_key
VITE_ONESIGNAL_APP_ID=your_onesignal_app_id

Replace the placeholder values with your OneSignal credentials.

Run the Project

Now, you're ready to run the Reminder App:

Start the Server:

npm run dev

Project Structure

├── index.html
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   ├── bell_icon.png
│   └── OneSignalSDKWorker.js
├── README.md
├── src
│   ├── App.tsx
│   ├── components
│   │   ├── CurrentTime.tsx
│   │   ├── Form.tsx
│   │   ├── Modal.tsx
│   │   ├── Navbar.tsx
│   │   ├── reminders
│   │   │   ├── ReminderForm.tsx
│   │   │   ├── ReminderList.tsx
│   │   │   └── Reminder.tsx
│   │   ├── Sidebar.tsx
│   │   └── tasks
│   │       ├── TaskForm.tsx
│   │       ├── TaskList.tsx
│   │       └── Task.tsx
│   ├── constants
│   │   ├── formData.ts
│   │   └── NavigationOptions.tsx
│   ├── context
│   │   ├── reminder
│   │   │   ├── ReminderContext.tsx
│   │   │   └── reminderReducer.ts
│   │   └── task
│   │       ├── TaskContext.tsx
│   │       └── TaskReducer.ts
│   ├── index.css
│   ├── main.tsx
│   ├── pages
│   │   └── Home.tsx
│   ├── services
│   │   ├── localStorage.ts
│   │   └── reminder.ts
│   ├── types
│   │   └── types.ts
│   └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

OneSignal Integration

This project leverages OneSignal for push notification services. Ensure that you have a OneSignal account, and configure your OneSignal App ID and REST API Key in the .env file.