steady-space
MALKProject: Physical Space Revamp – “How Can I Shape My Place and Space?” Learning Objective: Students will investigate, plan, and design improvements for a physical space in their community, demonstrating creativity, practicality, and clear communication of ideas. Success Criteria: I can Identify a space in their community that could be improved and explain why it needs change. Suggest practical and creative improvements that make the space more useful, accessible, or attractive. Visualize their ideas clearly using drawings, diagrams, or digital tools (Canva, PowerPoint, Adobe). Communicate their plan effectively with reasoning and examples. Reflect on the impact of their proposed improvements on community members. Presentation Notes & Explanations Step 1: Investigate the Space Explanation : “Think about a space you see every day in your community. Ask yourself: is this space easy to use? Is it fun or welcoming? Who goes there, and who avoids it? Your goal is to notice the problems and think about how it could be better.” Ideas to Suggest: Playground: missing swings, benches, or shade School courtyard: dull, empty, or lacks seating Community park: paths are broken, grass is dry, or area feels unsafe Bus stop: no shelter, benches, or lighting Library corner: crowded, uncomfortable seating, boring walls Prompt Questions : Who uses this space? What problems do people face here? How do you feel when you are in this space? Step 2: Plan Your Improvements Explanation : “Now that you know the problems, imagine the best version of this space. Think creatively and practically. Your changes should make it more useful, more welcoming, and more enjoyable for everyone.” Ideas to Suggest: Add seating (benches, chairs, cushions) Plant flowers, shrubs, or trees for beauty and shade Paint walls with murals or bright colors Create areas for specific activities (reading, playing, relaxing, exercising) Add lighting or signage for safety and clarity Prompt Questions for Students: What is the one change that would make the biggest difference? How can this space be useful for more people? Which changes are realistic and can actually be done? Step 3: Present Your Idea Explanation : “Once you have a plan, it’s time to share it. You don’t need to actually fix the space—just show others your vision. Use your visuals to explain clearly what you would do and why it’s important.” Ideas to Suggest: Show your sketches Explain your main idea in 1–2 sentences Highlight the top 2–3 improvements you think will help most Prompt Questions: Why did you pick this space? Which improvement matters most and why? How will people feel using this improved space? Step 4: Reflect Explanation: “Think about your design and what you learned. Even if you didn’t change the space physically, your ideas could inspire others.” Reflection Prompts: What was your favorite part of your design? Which idea would you implement first if you could? How will your improvements make the community happier or safer?
Comments (0)
Sign in to leave a comment
Project Tasks20
Implement Theme & Structure
As a developer, I want to implement the global theme, color palette, and structural layout from the mock-design pages so that all scaffold pages (home, login, signup, welcome, dashboard/overview, dashboard/ai-assistant, dashboard/settings) look identical to the mock-design. This includes setting up CSS variables for the design tokens: Background #F6F4F1, Surface #E8E2D0, Text #2D2D2D, Accent #FF6F61, Muted #A8B5C3. Also remove any pages not needed per the user flow. Font family: Inter. Establish shared layout components (navbar, footer shells).
Build Login Page
As a user I want to be able to use the frontend Login page so I can sign in as a Student or Organizer and be redirected to the Dashboard. Apply the steady-space theme (warm sand surface, coral accent buttons, charcoal text). Link to Signup. Design sub-step required if no JSX design exists.
Build Landing Page
As a user I want to be able to use the frontend Landing page so I can explore the interactive blueprint of a community space, view the how-it-works steps (Investigate, Design, Showcase), navigate to the Showcase, and start a project. Implement based on the existing Landing (v2) JSX design including: NavBar, HeroBlueprintStage with pencil-draw SVG animation, InteractiveBlueprintZones with hotspot markers, HowItWorks 3-step section, UserRoleCards, FeaturedStudentIdeas gallery, DesignYourSpaceCTA, ShowcaseEventBanner with countdown, TestimonialsCarousel, FAQAccordion, FinalCallToAction, and Footer. Design is already ready — implement pixel-perfect from JSX design.
Build Showcase Page
As a user I want to be able to use the frontend Showcase page so I can browse all student presentations, filter by space category, and click into individual Presentation detail pages. Organizers can schedule and manage showcase events from this page. Include event banner with date/location, card gallery of student ideas, and navigation to Presentation and Blueprint pages.
Build Blueprint Page
As a user I want to be able to use the frontend Blueprint page so I can interact with the community space blueprint, click on hotspot zones to view student ideas, and explore improvement proposals per zone. Audience can navigate here from Showcase. Implement zoomable SVG blueprint with clickable zone overlays and side-drawer idea previews.
Implement Bilingual Support (EN/AR)
As a user I want to be able to use the frontend in both English and Arabic so the platform is culturally accessible to UAE students and community members. Implement i18n with language toggle (EN/AR) in the Footer and Navbar. All UI strings must be translatable. RTL layout support for Arabic.
Build Presentation Page
As a user I want to be able to use the frontend Presentation page so I can view a full student idea including space visuals, improvement plan, and live presentation slides. Audience members can navigate from Showcase to this page and proceed to Feedback. Students prepare and preview their slides here.
Build Dashboard Page
As a user I want to be able to use the frontend Dashboard page so I can manage students (Organizer), start a new project (Student), navigate to Templates, schedule Showcase events, and access all project modules. Implement role-aware dashboard with sidebar navigation linking to Investigate, Planner, Visualizer, Presentation, Reflection, Templates, Showcase, and Feedback pages. Apply steady-space theme.
Build Reflection Page
As a user I want to be able to use the frontend Reflection page so I can reflect on the impact of my proposed improvements on community members, answer guided reflection prompts (What was your favorite part? Which idea first?), and submit my reflection to complete the project cycle.
Build Templates Page
As a user I want to be able to use the frontend Templates page so I can browse and download presentation templates and guidelines provided by Organizers. Students can access structured templates for live presentations. Organizers can upload and manage template resources.
Build Feedback Page
As a user I want to be able to use the frontend Feedback page so I can submit structured feedback on a student's presentation (Audience), and Organizers can view and collect all responses. Include a feedback form with rating, comments, and submission confirmation. Links from Presentation page.
Build Investigate Page
As a user I want to be able to use the frontend Investigate page so I can identify and document a community space that needs improvement, answer guided prompt questions (Who uses this space? What problems exist?), and submit my investigation for review. Links from Student Dashboard.
Build Planner Page
As a user I want to be able to use the frontend Planner page so I can design and plan improvements for my investigated space, select improvement categories (seating, greenery, murals, lighting), and document my plan with reasoning. Links from Investigate page and feeds into Visualizer.
Implement Projects Backend API
As a developer I want to implement backend API endpoints for student project lifecycle so the frontend Investigate, Planner, Visualizer, and Presentation pages can create, read, update, and delete project submissions. Endpoints: POST /projects, GET /projects, GET /projects/{id}, PUT /projects/{id}, DELETE /projects/{id}. FastAPI + MySQL.
Implement File Upload Service
As a developer I want to implement a file upload backend service so students can upload drawings, diagrams, and visual exports on the Visualizer page. Support image formats (PNG, JPG, PDF, PPT exports). Endpoints: POST /uploads, GET /uploads/{id}. Integrate with project submission flow.
Build Visualizer Page
As a user I want to be able to use the frontend Visualizer page so I can upload drawings, diagrams, or digital tool exports (Canva, PowerPoint, Adobe) to visually represent my improvement plan. Supports image upload, annotation, and preview. Links from Planner and feeds into Presentation.
Implement Showcase Backend API
As a developer I want to implement backend API endpoints for showcase event management so the Showcase and Presentation pages can list events, register audience members, and submit projects. Endpoints: POST /showcases, GET /showcases, GET /showcases/{id}, POST /showcases/{id}/register, POST /showcases/{id}/projects. FastAPI + MySQL.
Implement AI Presentation Tips API
As a developer I want to implement an AI-powered API endpoint using GPT and Langchain so students can receive user-friendly presentation tips and improvement suggestions based on their project content. Endpoint: POST /ai/presentation-tips with project context payload. Integrate with dashboard AI assistant page.
Implement Templates Backend API
As a developer I want to implement backend API endpoints for template management so Organizers can upload guidelines and Students can browse and download templates. Endpoints: POST /templates, GET /templates, GET /templates/{id}, DELETE /templates/{id}. FastAPI + MySQL + file storage.
Implement Feedback Backend API
As a developer I want to implement backend API endpoints for audience feedback collection so the Feedback page can submit and retrieve structured responses per presentation. Endpoints: POST /feedback, GET /feedback?presentation_id={id}, GET /feedback/summary/{presentation_id}. FastAPI + MySQL.
No comments yet. Be the first!