PROJECT OVERVIEW:
The application, named "Uzay Yatırımcıları Rehberi" (Space Investors' Guide), aims to be a comprehensive financial analysis and community platform for investors interested in the burgeoning space industry. It addresses the challenge of fragmented information and the difficulty in accessing real-time, in-depth financial data and community insights for publicly traded space companies, particularly focusing on high-profile IPOs like SpaceX. The core value proposition is to provide a one-stop solution for investors to research, track, and discuss space industry investments, enabling informed decision-making. The MVP will focus on delivering essential financial data, IPO tracking, a community forum, basic analytical tools, and a personalized watchlist.
TECH STACK:
- Frontend Framework: React (using Create React App for simplicity or Next.js for potential SSR/SEO benefits, let's start with CRA for MVP)
- Styling: Tailwind CSS for rapid UI development and utility-first styling.
- State Management: React Context API for managing global state (like user authentication, watchlist data) and component-local state with `useState` and `useReducer`.
- Routing: React Router DOM for client-side navigation.
- Data Fetching: Axios for making HTTP requests to a potential future backend API.
- Form Handling: Formik and Yup for form validation.
- Icons: Heroicons or Font Awesome for UI icons.
- Deployment: Netlify or Vercel for easy deployment of a static React application.
CORE FEATURES:
1. **Company Financial Data Display:**
* **User Flow:** User navigates to the 'Companies' section, selects a specific company (e.g., SpaceX if public, or other space tech companies). The system displays key financial metrics such as Revenue, Profit/Loss, Debt-to-Equity Ratio, Market Cap, and P/E Ratio. Data will be presented in clear tables and digestible charts.
* **Details:** Focus on presenting historical data (quarterly/annually) and current data points. Clean presentation is key.
2. **IPO Tracking & Notifications:**
* **User Flow:** Users can view a calendar of upcoming IPOs in the space sector. They can opt-in to receive notifications (via browser push notifications or email if backend is implemented) for specific IPOs they are interested in, including filing dates, expected listing dates, and price ranges.
* **Details:** This feature needs a reliable source of IPO data. For MVP, it can be manually curated or integrated with a public API if available.
3. **Investor Community Forum:**
* **User Flow:** Users can register/login, create posts, comment on existing posts, and upvote/downvote discussions related to space investments. They can filter discussions by company or topic.
* **Details:** Basic forum functionality: Create, Read, Update, Delete (CRUD) for posts and comments. User profiles will be minimal initially.
4. **Basic Analysis Tools:**
* **User Flow:** Users can view historical stock price charts (line charts) for publicly traded companies. Simple technical indicators like Moving Averages could be added.
* **Details:** Integration with a charting library like Chart.js or Recharts.
5. **Personalized Watchlist:**
* **User Flow:** Logged-in users can add companies to their personal watchlist. The watchlist page displays key metrics for all added companies in a summarized table, allowing users to quickly monitor their preferred investments.
* **Details:** Requires user authentication and local storage or a backend for persistence. For MVP, local storage is sufficient.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) with a clean, modern layout. A persistent sidebar navigation for main sections (Dashboard, Companies, IPOs, Forum, Watchlist, Profile). A header with the app logo and search bar.
- **Color Palette:** Primary: Deep space blue (#0B132B), Secondary: Futuristic silver/grey (#ADB5BD), Accent: Vibrant cyan or orange for CTAs and highlights (#00FFFF or #FFA500). White/off-white for backgrounds (#FFFFFF).
- **Typography:** Use a sans-serif font family like 'Inter' or 'Roboto' for readability. Clear hierarchy using font weights and sizes.
- **Responsive Design:** Mobile-first approach. Utilize Tailwind CSS's responsive modifiers (sm:, md:, lg:) to ensure the layout adapts seamlessly to various screen sizes (smartphones, tablets, desktops). Sidebar collapses into a hamburger menu on smaller screens.
- **Component Hierarchy:** Use a clear, nested structure. e.g., `App` -> `Layout` -> `Sidebar`, `Header`, `MainContent` -> `SectionComponent` -> `Card`, `Chart`, `Table`, etc.
COMPONENT BREAKDOWN:
- `App.js`: Root component, sets up routing.
- `Layout.js`: Main layout wrapper, includes Header, Sidebar, and Content area.
- `Header.js`: Contains logo, search bar, user profile/login button.
- `Sidebar.js`: Navigation links (Dashboard, Companies, IPOs, Forum, Watchlist).
- `HomePage.js` / `Dashboard.js`: Overview of watchlist, recent forum activity, upcoming IPOs.
- `CompanyListPage.js`: Lists all tracked space companies.
- `CompanyDetailPage.js`: Shows detailed financial data, charts, and company-specific forum threads for a single company.
* `FinancialsTable.js`: Displays financial metrics.
* `ChartComponent.js`: Renders stock price charts.
- `IpoListPage.js`: Displays upcoming IPOs calendar/list.
- `ForumPage.js`: Main forum view, lists topics/posts.
* `PostList.js`: Renders list of forum posts.
* `PostItem.js`: Displays a single forum post with options to comment/vote.
* `CreatePostForm.js`: Form to create a new post.
- `WatchlistPage.js`: Displays the user's personalized watchlist.
* `WatchlistItem.js`: Displays data for a single company in the watchlist.
- `AuthModal.js`: Modal for login/registration.
- `Button.js`: Reusable button component.
- `Card.js`: Reusable card component for content display.
DATA MODEL:
- **State Structure (using Context API):**
```javascript
const AppState = {
user: { isAuthenticated: false, profile: null },
watchlist: [], // [{ id: 'company1', name: 'SpaceX', symbol: 'SPX' }]
companies: [], // [{ id: 'company1', name: 'SpaceX', symbol: 'SPX', financials: {...}, charts: {...} }]
ipos: [], // [{ id: 'ipo1', companyName: 'Starlink IPO', date: '2026-04-01', status: 'upcoming' }]
forumPosts: [], // [{ id: 'post1', title: 'SpaceX IPO Analysis', author: 'user1', comments: [...], upvotes: 10 }]
loading: { companyData: false, forumData: false, iposData: false },
error: { companyData: null, forumData: null, iposData: null }
};
```
- **Mock Data Format:**
* **Company:** `{ id: 'spacex', name: 'SpaceX', symbol: 'SPX', description: '...', sector: 'Aerospace', foundingDate: '2002-05-06', ceo: 'Elon Musk', financials: { quarterlyRevenue: [1.5B, 1.6B, 1.7B], quarterlyProfit: [100M, 120M, -50M], marketCap: 150B, peRatio: 45.5 }, chartData: [{ x: '2023-01-01', y: 150 }, { x: '2023-01-02', y: 155 }] }`
* **IPO:** `{ id: 'starlink_ipo_2026', companyName: 'Starlink (SpaceX Division)', filingDate: '2026-01-15', expectedListingDate: '2026-04-01', status: 'Filed', targetPrice: '$60-$70' }`
* **Forum Post:** `{ id: 'post_123', author: { id: 'user_abc', username: 'AstroInvestor' }, title: 'Is SpaceX IPO Overvalued?', content: '...', timestamp: '2024-03-15T10:30:00Z', comments: [{ id: 'comment_456', author: { id: 'user_xyz', username: 'GalacticTrader' }, content: '...', timestamp: '2024-03-15T10:45:00Z' }], upvotes: 25, commentCount: 5 }`
ANIMATIONS:
- **Hover Effects:** Subtle background color changes or slight scaling on buttons, cards, and navigation links.
- **Transition Animations:** Smooth transitions for route changes (e.g., fade-in/out) using React Router transitions or a library like `Framer Motion`. Smooth expansion/collapse for accordions or expandable sections.
- **Loading States:** Use skeleton loaders (e.g., placeholder divs with shimmer effect) or spinners (e.g., `react-spinners`) for data fetching. Button loading states to indicate an ongoing action.
- **Micro-interactions:** Subtle animations on form submissions (e.g., checkmark animation), adding items to watchlist, or upvoting posts.
EDGE CASES:
- **Empty States:** Design specific UI states for when lists are empty (e.g., no companies found, empty watchlist, no forum posts). Provide clear messages and calls to action (e.g., 'Add companies to your watchlist').
- **Error Handling:** Gracefully handle API errors or network issues. Display user-friendly error messages (e.g., 'Could not load company data. Please try again later.'). Implement retry mechanisms where appropriate.
- **Validation:** Implement client-side validation using Yup for all user inputs (login, registration, forum posts, search). Provide clear, inline error messages.
- **Accessibility (a11y):** Ensure proper semantic HTML, ARIA attributes where necessary, keyboard navigation support, sufficient color contrast, and focus management.
- **Authentication:** Handle logged-in vs. logged-out states correctly. Protect routes and features that require authentication.
SAMPLE DATA:
1. **Company:** `{ "id": "spacex", "name": "SpaceX", "symbol": "SPX", "sector": "Aerospace & Defense", "foundingDate": "2002-05-06", "ceo": "Elon Musk", "financials": { "q1_2023": { "revenue": "1500000000", "profit": "100000000" }, "q2_2023": { "revenue": "1600000000", "profit": "120000000" }, "annual_2022": { "revenue": "6000000000", "profit": "500000000" }, "marketCap": "150000000000", "peRatio": "45.5" }, "chartData": [{"date": "2023-01-01", "price": 150}, {"date": "2023-01-08", "price": 155}, {"date": "2023-01-15", "price": 153}] }`
2. **Company:** `{ "id": "blueorigin", "name": "Blue Origin", "symbol": "BO", "sector": "Aerospace", "foundingDate": "2000-07-20", "ceo": "Bob Smith", "financials": null, "chartData": [] }` (Private company, null data for now)
3. **IPO:** `{ "id": "starlink_ipo_2026", "companyName": "Starlink (SpaceX Division)", "filingDate": "2026-01-15", "expectedListingDate": "2026-04-01", "status": "Filed", "targetPrice": "$60-$70" }`
4. **IPO:** `{ "id": "rocketlab_secondary_2025", "companyName": "Rocket Lab (Secondary Offering)", "filingDate": "2025-07-01", "expectedListingDate": "2025-08-15", "status": "Planned", "targetPrice": null }`
5. **Forum Post:** `{ "id": "post_123", "author": { "id": "user_abc", "username": "AstroInvestor" }, "title": "SpaceX IPO Valuation Concerns", "content": "Given the rapid growth and ambitious projects, is the potential valuation of SpaceX justified?", "timestamp": "2024-03-15T10:30:00Z", "comments": [ { "id": "comment_456", "author": { "id": "user_xyz", "username": "GalacticTrader" }, "content": "I think it’s high, but the market potential is immense.", "timestamp": "2024-03-15T10:45:00Z" } ], "upvotes": 25, "commentCount": 5 }`
6. **Forum Post:** `{ "id": "post_124", "author": { "id": "user_def", "username": "RocketFanatic" }, "title": "Best Investment: SpaceX vs Blue Origin?", "content": "Which company do you think will yield better returns long term?", "timestamp": "2024-03-16T09:00:00Z", "comments": [], "upvotes": 10, "commentCount": 0 }`
7. **Watchlist Item:** `{ "companyId": "spacex", "addedDate": "2024-03-10" }`
8. **User Profile:** `{ "id": "user_abc", "username": "AstroInvestor", "email": "astro@example.com", "joinedDate": "2024-01-20" }`
9. **Financial Metric:** `{ "period": "Q1 2023", "revenue": "1.5B", "costOfGoodsSold": "0.5B", "grossProfit": "1.0B", "operatingExpenses": "0.6B", "operatingIncome": "0.4B", "netIncome": "0.1B" }`
10. **Chart Data Point:** `{ "date": "2023-01-01T00:00:00Z", "price": 150.75 }`
DEPLOYMENT NOTES:
- Use `npm run build` to create a production-ready build. The output will be in the `build/` folder.
- Environment Variables: For a future backend integration, use `.env` file for variables like `REACT_APP_API_URL`. For local development, create a `.env.local` file.
- Performance Optimizations: Code splitting with React.lazy and Suspense for large components. Image optimization. Bundle analysis using `webpack-bundle-analyzer`.
- CORS: Ensure backend API handles CORS correctly if a separate backend is introduced.
- Hosting: Deploy the static build to Netlify or Vercel for CI/CD integration and global CDN.