Specifications & UI Design

Create Your GitHub Account

GitHub is the platform where developers store and collaborate on code. You will use it throughout this course to manage your project.

Instructions

1. Go to github.com and click Sign Up
2. Choose a professional username (e.g. firstname-lastname)
3. Verify your email address from your inbox
4. Complete your profile:
   • Add a profile photo
   • Write a short bio (e.g. "Student learning app development")

Create Your Repository

A repository (or "repo") is where your project files and history are stored. Think of it as a folder in the cloud that tracks every change you make.

Instructions

1. Click the "+" icon in the top-right corner, then select "New repository"
2. Repository name: study-planner
3. Description: "A task management app for students"
4. Set visibility to Public
5. Check "Add a README file"
6. Click "Create repository"

Write Your Specifications

Part A: Edit Your README

Click on the README.md file in your repository, then click the pencil icon to edit it. Replace the default content with the following structure:

# StudyPlanner
A task management app for students.

## Target Users
Students managing coursework and deadlines.

## Features
- Create tasks with title, due date, and priority
- View all tasks in a list
- Mark tasks as complete
- Filter tasks by subject
- Set priority levels (low / medium / high)

## Tech Stack
- Next.js (React framework)
- Deployed on Vercel

Part B: Write User Stories

User stories describe features from the user's perspective. They follow this format:

"As a [user], I want to [action], so that [benefit]"

Add a "User Stories" section to your README with at least 5 user stories. Here are examples to get you started:

1. "As a student, I want to create tasks with a due date, so that I can track my assignments."
2. "As a student, I want to mark tasks as complete, so that I can see my progress."
3. "As a student, I want to filter tasks by subject, so that I can focus on one course at a time."
4. "As a student, I want to set priority levels, so that I know which tasks to work on first."
5. "As a student, I want to see a list of all my tasks, so that I have an overview of my workload."

Generate Screens with Stitch AI

Stitch is an AI design tool by Google that generates complete app screens from a text description. You will use it to quickly create your first designs, then import them into Figma for refinement.

Part A: Open Stitch

1. Go to stitch.withgoogle.com
2. Sign in with your Google account
3. Click "Create new project"
4. Name your project "StudyPlanner"

Part B: Generate Your Screens

You need at least 3 screens. Use the text prompt box to describe each screen. Generate them one at a time:

Part C: Export from Stitch

Once you are satisfied with your screens:

1. Review each screen and make any last adjustments in Stitch
2. Click the export or download button for each screen
3. Choose "Export to Figma" if available, or download as PNG/SVG files
4. Save all exported files to a folder on your computer

Import & Refine in Figma

Part A: Set Up Figma

1. Create a free account at figma.com
2. Create a new design file named "StudyPlanner Design"

Part B: Import Your Stitch Designs

Bring your generated screens into Figma:

• If you exported as Figma file: Open the file directly in Figma, then copy the frames into your "StudyPlanner Design" file
• If you exported as PNG/SVG: Drag and drop the image files onto your Figma canvas, or use File → Place Image

Part C: Refine Your Designs

Now that your screens are in Figma, refine them for consistency:

• Make sure all screens use the same color palette
• Use consistent fonts and font sizes across screens
• Ensure buttons and interactive elements have a similar style
• Add your app name and navigation elements to each screen
• Add labels or annotations to clarify interactive elements

Part D: Share Your Design

1. Click Share in the top-right corner of Figma
2. Set the link to "Anyone with the link can view"
3. Copy the share link — you will submit this to your teacher

Convert Design to GitHub Issues

Now you will turn your design and specifications into actionable work items. Go to your repository → Issues tab → New issue.

Create one GitHub issue per feature or screen. Each issue should follow this format:

Title: Create Task List Page

Description:
Display all tasks in a card-based list with title,
due date, subject, and completion status.

Acceptance Criteria:
- [ ] Page loads at /tasks
- [ ] Shows all tasks from the database
- [ ] Each task displays title, due date, subject, priority
- [ ] Completed tasks are visually distinct
- [ ] Empty state message when no tasks exist
- [ ] Page is responsive on mobile screens

Labels: feature, ui

Add Labels to Your Issues

Go to Issues → Labels and create these labels if they do not already exist:

• feature — New functionality to implement
• ui — User interface and visual design
• data — Data management and storage

Apply the appropriate label(s) to each issue you create.

Suggested Issues

Create a minimum of 5 issues (recommended: 8–10). Here are suggestions to cover all features and screens:

1. Set up project structure
2. Create task list page
3. Create add task form
4. Create task detail view
5. Implement task completion toggle
6. Add priority filtering
7. Add subject/course filtering
8. Create dashboard with statistics

Deliverables & Evaluation

Before you leave, make sure all of the following are complete and shared with your teacher:

Evaluation Criteria

Criterion	Weight	Description
GitHub Setup	15%	Account, repository, and README properly configured
Specifications	25%	Clear features list and well-written user stories
Figma Design	30%	At least 3 screens, consistent design, shared properly
GitHub Issues	20%	Well-structured issues with acceptance criteria
Organization	10%	Labels, clear descriptions, professional presentation

Bonus Challenges