Create Core MVP Wireframes

[Fis-ayo]

Description

Design low-fidelity wireframes for the core MVP screens of CodeFolio. These wireframes should focus on layout, content placement, and user flow for the most important features only.

At this stage, the goal is to give the team a clear visual guide before development begins. Keep the designs simple and practical so both frontend and backend teammates can understand the structure of each page.

Tasks

• Create wireframes for the core MVP screens:
  • Landing / Home page
  • Login page
  • Sign up page
  • Dashboard page
  • User profile page
• Show the main sections on each screen
  • Navigation
  • Forms
  • Buttons / actions
  • Content cards
  • Comment section where needed
• Map out the basic user flow between screens
  • User signs up / logs in
  • User views project feed
  • User clicks into a project
  • User views a profile
• Keep the layouts consistent across screens

Design Requirements

• Focus only on core MVP pages
• Use low-fidelity wireframes only
• Prioritize structure and usability over visual styling
• Keep navigation simple and consistent
• Design should be easy to implement in React with TailwindCSS
• Use a mobile-responsive mindset, but prioritize desktop layout first if needed

References

• Project Planning Doc README.md planning/user_stories.md
• User stories for viewers and developers
• Figma or any wireframing tool agreed on by the team

Example Workflow

Acceptance Criteria

• Wireframes exist for all core MVP screens
• Main layout and user flow are clear
• Screens are consistent in structure
• Wireframes are shared with the team
• Wireframes are ready to guide frontend development

[codewithMycah]

Link for the wireframes using Figma

[Fis-ayo]

Link for the wireframes using Figma

Alright as of now these work. Could create pull request to add the wireframes to planning/wireframes.md ?