Mikaela & Carolina final project (Womenation Medlemsportal)

.gitignore

@@ -1,15 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+anteckningar
 node_modules
-.DS_Store
+dist
+dist-ssr
+*.local
+package-lock.json
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
-build
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-package-lock.json
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

PLANNING.md

@@ -0,0 +1,203 @@
+> 📚 **Navigation:** [README](README.md) | [TODO](TODO.md) 
+# 📐 Planning Document
+> **Open in preview**  
+`Shift + Command + V on Mac`  
+`Shift + Control + V on Windows`
+
+> 💡 **Tip:** Convert planning items to tasks in TODO.md as you finalize decisions
+
+## 📋 Table of Contents
+- [Project Overview](#1)
+- [Goals & Requirements](#2)
+- [Design & Wireframes](#3)
+- [Technical Planning](#4)
+- [API Planning](#5)
+- [State Management](#6)
+- [Accessibility Plan](#7)
+- [Timeline & Milestones](#8)
+- [Risks & Challenges](#9)
+- [Resources & References](#10)
+- [Notes & Ideas](#11)
+- [Next Steps](#12)
+
+<a id="1"></a>
+## 📌 Project Overview
+**Project Name:** Womenation Membership 
+**Timeline:** 17/3 - 24/4 
+
+### Project Description
+
+
+<a id="2"></a>
+## 🎯 Goals & Requirements
+
+### Core Requirements (Must-Have)
+- Requirement 1
+- Requirement 2
+- Requirement 3
+
+### Stretch Goals (Nice-to-Have)
+- Feature 1
+- Feature 2
+
+### Learning Objectives
+What do you want to learn/practice in this project?
+- Technology, concept, or skill to practice
+
+<a id="3"></a>
+## 🎨 Design & Wireframes
+
+In graphical design file. 
+
+### Wireframes
+[Figmadesign WIP](https://www.figma.com/design/TZNZ0U28L0Z7IOS1g4oUOR/womenation--design?node-id=0-1&p=f&t=ggM79gvBe0FchJft-0)
+
+<a id="4"></a>
+## 🏗️ Technical Planning
+### Tech Stack Decision
+| Technology | Purpose | Why chosen? |
+|------------|---------|-------------|
+| Framework/Library | Frontend/Backend | Reasoning |
+| Tool/Service | Specific use case | Reasoning |
+| React | Frontend |  |
+| MongoDB |  |  |
+|  |  |  |
+
+### Components Breakdown
+List all planned components:
+
+**Reusable Components:**
+- `ComponentName` - Purpose and functionality
+- `ComponentName` - Purpose and functionality
+
+**Page Components:**
+- `PageName` - What the page displays/does
+- `PageName` - What the page displays/does
+
+**Layout Components:**
+- `LayoutElement` - Purpose and location
+- `LayoutElement` - Purpose and location
+
+<a id="5"></a>
+## 🔌 API Planning
+### Endpoints to Use
+| Endpoint | Method | Purpose | Response |
+|----------|--------|---------|----------|
+| `/api/resource` | GET | Description of what it fetches | Data type returned |
+| `/api/resource/:id` | GET | Description of specific fetch | Data type returned |
+
+### Data Structure
+```json
+{
+  "id": 1,
+  "property": "value",
+  "nested": {
+    "key": "value"
+  }
+}
+```
+
+### Error Handling Strategy
+- Network errors: Show error message
+- 404: Display "Not found" page
+- 500: Display "Server error" message
+
+<a id="6"></a>
+## 📊 State Management
+### State Planning
+What state do you need to manage?
+
+**Global State:**
+- User authentication status
+- Theme preference
+
+**Component State:**
+- Loading states
+- Error states
+- Local state item and scope
+
+
+### Data Flow
+Describe how data moves through your app:
+1. User action triggers...
+2. Component updates state...
+3. API call is made...
+4. Response updates UI...
+
+<a id="7"></a>
+## ♿ Accessibility Plan (example)
+### Checklist
+- [ ] Semantic HTML elements
+- [ ] Alt text for all images
+- [ ] Keyboard navigation
+- [ ] ARIA labels where needed
+- [ ] Color contrast ratio (WCAG AA)
+- [ ] Focus indicators
+- [ ] Screen reader testing
+
+<a id="8"></a>
+## 📅 Timeline & Milestones
+### Week 1: Planning & Setup
+- [ ] Project planning
+- [ ] Setup repository
+- [ ] Create basic structure
+
+### Week 2: Core Features
+- [ ] Implement feature A
+- [ ] Implement feature B
+
+### Week 3: Styling & Polish
+- [ ] Responsive design
+- [ ] Cross-browser testing
+
+### Week 4: Final Touches
+- [ ] Bug fixes
+- [ ] Documentation
+- [ ] Deployment
+
+<a id="9"></a>
+## 🚨 Risks & Challenges
+### Potential Blockers
+| Risk | Impact | Mitigation |
+|------|--------|------------|
+| API downtime | High | Implement error handling, mock data |
+| Time constraint | Medium | Prioritize core features first |
+
+### Questions to Resolve
+- How should pagination work?
+- What's the fallback for missing images?
+- How to handle expired tokens?
+
+
+<a id="10"></a>
+## 📚 Resources & References
+### Tutorials
+- [Tutorial name](link)
+
+### Documentation
+- [Library docs](link)
+
+### Inspiration
+- [Similar project](link)
+
+### Tools
+- [Design tool](link)
+- [Icon library](link)
+
+
+<a id="11"></a>
+## 📝 Notes & Ideas
+Random thoughts, ideas, or things to remember:
+- 
+- 
+
+<a id="12"></a>
+## 🔄 Next Steps
+Once planning is complete:
+1. ✅ Review and finalize all sections above
+2. 📋 Create actionable tasks in [TODO](TODO.md) based on this plan
+3. 🚀 Begin implementation following the timeline
+4. 📝 Update [README](README.md) as features are completed
+
+**Last Updated:** [Date]  
+**Next Review:** [Date]