DEV Community: christal riziki

Building an AI-Powered Task Scheduler with Angular and Gemini

christal riziki — Tue, 31 Mar 2026 08:38:51 +0000

In today’s fast-paced digital world, productivity tools are evolving beyond static task lists into intelligent assistants. In this project, I built an AI-powered task scheduler using Angular and Gemini, demonstrating how modern front end frameworks can seamlessly integrate with generative AI to enhance user experience.

Project Overview

The application allows users to:

Schedule tasks (name, email, type, date, time)
View scheduled tasks dynamically
Generate AI-powered reminders based on their task list

This bridges the gap between traditional scheduling tools and intelligent automation.

Architecture

The system is built using:

Frontend: Angular (Standalone Components)
AI Integration: Google Gemini API
HTTP Communication: Angular HttpClient
State Handling: Component-level state
User Input → Angular Component → AI Service → Gemini API → Response → UI

Key Angular Concepts Used
1. Standalone Components

Instead of NgModules, the app uses Angular’s modern standalone architecture:

typescript @Component({ standalone: true, imports: [FormsModule, CommonModule] })

`
This simplifies structure and improves scalability

Service-Based Architecture

AI logic is separated into a service:

@Injectable({ providedIn: 'root' })
export class AiService { }

This keeps the component clean and reusable.

*HTTP Requests with HttpClient * Instead of Axios, Angular’s native HttpClient is used:

typescript this.http.post(this.apiUrl, body)

Benefits:

Built-in RxJS support
Interceptors
Better Angular integration

Gemini AI Integration

The application uses Gemini to generate contextual reminders:

typescriptconst prompt = Here are my tasks: ${JSON.stringify(tasks)}. Suggest a helpful reminder for me.;`

` API Request Structure { "contents": [ { "parts": [ { "text": "Prompt here" } ] } ] } `plaintext
`
Response Handling
res?.candidates?.[0]?.content?.parts?.[0]?.text

Challenges & Lessons Learned

API Errors (403 & 503)

403 → Permission / API key issues
503 → Model unavailable or overloaded

** Solution:**

Use stable model: gemini-3.1-flash-lite
Enable API + billing
Handle errors gracefully

2. Angular Component Scope

CSS initially didn’t apply due to Angular’s style encapsulation.

Solution:

Match HTML structure with CSS classes
Move global styles to styles.css

3. Standalone Component Imports

Error:

'app-scheduler' is not a known element

** Solution:**

imports: [Scheduler]
Security Consideration

Calling Gemini directly from Angular exposes your API key.

Best Practice:
Angular → Backend → Gemini API

This protects credentials and improves scalability.

Impact

This project demonstrates:

How AI can enhance everyday applications
The power of Angular in building scalable UIs
The simplicity of integrating generative AI into real-world apps

Conclusion

By combining Angular and Gemini, we move from static interfaces to intelligent, context-aware applications.

This is just the beginning of what AI-powered frontend development can achieve.

Building a Structured Healthcare Website with React & Vite: A Practical Walkthrough

christal riziki — Wed, 11 Feb 2026 23:04:34 +0000

Introduction

In this project, I built a modern healthcare website using React and Vite, with a strong emphasis on clean component architecture, maintainable styling, and real-world debugging. The application focuses on presenting healthcare services, professional expertise, and contact information in a clear, accessible, and scalable way specifically tailored for a women’s health and gynecologic oncology context.

This article documents the technical decisions, folder structure, common errors encountered, and solutions applied during development.

Technology Stack

React (Functional Components)

Vite (for fast development and bundling)

CSS (modular, folder-based styling)

React Router (page-level navigation)

ES Modules

Project Structure

One of the earliest and most important steps was defining a clear folder structure:

src/ ├─ pages/ │ ├─ Services.jsx │ ├─ Contact.jsx │ └─ Home.jsx ├─ styles/ │ ├─ Services.css │ └─ Contact.css ├─ components/ │ └─ Navbar.jsx └─ App.jsx

Why this matters

Pages represent full routes (/services, /contact)

Components are reusable UI pieces

Styles are centralized and easy to maintain

Prevents import confusion and scaling issues later

Building the Services Page

**
Defining a Proper React Component

One of the first issues encountered was a classic beginner error:

ReferenceError: Services is not defined

This happened because JSX was written without wrapping it in a function component.

Correct Approach

Every React page must:

Be wrapped in a function

Return JSX

Be exported

`function Services() {
return (

{/* JSX goes here */}

);
}

export default Services;

Using Data-Driven Rendering

Instead of hardcoding each service card, I used an array of objects and mapped over it:

`const services = [
{ title: "Gynecologic Oncology Care", text: "..." },
{ title: "Cervical Cancer Prevention", text: "..." }
];

{services.map((service, index) => (

{service.title}

{service.text}

``
**

Benefits

Cleaner JSX

Easier to update or add services

More scalable for APIs or CMS integration

Styling with External CSS

The Import Error Problem

A common Vite error appeared:

Failed to resolve import "./Services.css"

This happened because:

The CSS file was located in src/styles

The import path assumed the same folder

Correct Import Path
import "../styles/Services.css";
Key Takeaway

Vite is strict about file paths and capitalization.
Always verify:

Folder location

Exact file name casing

Structuring Sections for Readability

The Services page was broken into clear semantic sections:

Intro Header

Services Grid

How It Works

Why Choose My Services

Each section had:

A dedicated container

Clear class names

Logical hierarchy

This improves:

Accessibility

Maintainability

Team collaboration

Aligning Content with Domain Knowledge

The “Why Choose My Services” section was initially generic.
I refined it to reflect actual expertise, including:

Gynecologic oncology specialization

Cervical cancer prevention

Community outreach

Digital health and health systems strengthening

This highlights an important lesson:

Good React code is not just about components—it’s about accurate, intentional content.

Building the Contact Page Header

The Contact page required a minimal, professional header section:

No buttons

No CTA components

Just a title and supporting text

<section className="contact-section"> <h1>Get in Touch</h1> <p>Contact us to schedule an appointment...</p> </section>

Styled with:

Centered layout

Soft neutral background

Accessible font sizes

Debugging Mindset: Lessons Learned

Throughout development, we encountered and resolved:

Undefined component exports

Always define and export components properly

Broken CSS imports

Match folder structure and relative paths

** Over-engineering**

Keep pages simple unless reuse is required

** Generic content**

Align UI text with real domain expertise

Best Practices Applied

Functional components only

Clear file naming

Relative imports (no magic paths)

Data-driven rendering

Separation of concerns (JSX vs CSS)

Conclusion

This project demonstrates how real React development works:

You build

You break things

You debug

You refine both code and content

By combining clean architecture, practical debugging, and domain-aligned content, we created a healthcare website that is both technically sound and professionally credible.

This approach scales well—whether the next step is form handling, API integration, authentication, or deployment.

Setting Up Your First React Project with Vite and VS Code

christal riziki — Tue, 03 Feb 2026 08:34:26 +0000

Introduction

React is one of the most popular JavaScript libraries for building modern user interfaces. For beginners, the biggest challenge is often not React itself, but setting up the development environment correctly. This article walks through a simple, modern, and reliable way to set up your first React project using Node.js, Vite, and Visual Studio Code, while addressing common issues beginners face.

Prerequisites

Before starting a React project, you need the following:

A computer running Windows, Linux, or macOS

Node.js (LTS version recommended)

npm (comes bundled with Node.js)

Visual Studio Code

Installing Node.js

Download Node.js from the official website:

After installation, verify it by running:

node -v npm -v
Why Use Vite Instead of Create React App?

Vite is a modern build tool that provides:

Faster startup time

Instant hot reload

Minimal configuration

Industry adoption for modern React projects
reating a React Project with Vite

Run the following command in your terminal:

npm create vite@latest my-first-react-app

When prompted, select:

Framework: React

Variant: TypeScript /Javascript (Work with a languange that you best understand)
During setup, you may see this prompt:

Use rolldown-vite ?
○ Yes
● No

What Is rolldown-vite?

rolldown-vite is an experimental version of Vite that uses a new Rust-based bundler. While it promises better performance, it is not recommended for beginners due to limited documentation and potential instability.

Always choose No when a beginner in React.

Installing Dependencies

Navigate into the project folder and install dependencies:

cd my-first-react-app
npm install

Lastly Open your first react project in your Vs Code.