{"id":27194768,"url":"https://github.com/medea-learner/e-commerce-web-and-mobile-app","last_synced_at":"2026-04-10T17:03:29.544Z","repository":{"id":287040823,"uuid":"963405721","full_name":"medea-learner/e-commerce-web-and-mobile-app","owner":"medea-learner","description":"Full-stack e-commerce platform with a responsive Next.js 15 web app and a performant Expo React Native mobile app. Includes authentication, product management, filtering, and API integration using fakestoreapi.com.","archived":false,"fork":false,"pushed_at":"2025-04-09T17:40:00.000Z","size":121,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T17:42:14.277Z","etag":null,"topics":["axios","context-api","ecommerce","expo","fakestoreapi","fullstack","nativewind","nextjs","nextjs15","react-native","react-query","responsive-design","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/medea-learner.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-09T16:23:44.000Z","updated_at":"2025-04-09T17:40:04.000Z","dependencies_parsed_at":"2025-04-09T17:53:34.050Z","dependency_job_id":null,"html_url":"https://github.com/medea-learner/e-commerce-web-and-mobile-app","commit_stats":null,"previous_names":["medea-learner/e-commerce-web-and-mobile-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medea-learner%2Fe-commerce-web-and-mobile-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medea-learner%2Fe-commerce-web-and-mobile-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medea-learner%2Fe-commerce-web-and-mobile-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medea-learner%2Fe-commerce-web-and-mobile-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/medea-learner","download_url":"https://codeload.github.com/medea-learner/e-commerce-web-and-mobile-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248098486,"owners_count":21047449,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","context-api","ecommerce","expo","fakestoreapi","fullstack","nativewind","nextjs","nextjs15","react-native","react-query","responsive-design","tailwindcss","typescript"],"created_at":"2025-04-09T19:36:21.628Z","updated_at":"2025-12-30T23:05:08.108Z","avatar_url":"https://github.com/medea-learner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Mobile App\n\nThe mobile app leverages Expo and incorporates several modern libraries and best practices to ensure optimal performance, maintainability, and scalability. The app uses Axios for API calls, Zustand for global state management, React Query for caching and automatic retries, and Nativewind for styling.\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Architectural and Technical Decisions](#architectural-and-technical-decisions)\n- [File Structure](#file-structure)\n- [Setup \u0026 Configuration](#setup--configuration)\n- [Development Process](#development-process)\n- [Usage \u0026 Running the App](#usage--running-the-app)\n- [Additional Information](#additional-information)\n\n## Overview\n\nThe React Native Mobile App is designed to be fast, responsive, and maintainable. It communicates with an external API (in this case, [FakeStoreAPI](https://fakestoreapi.com)) using Axios. Global state management is handled by Zustand to easily manage user authentication state, and React Query ensures that API data is cached and revalidated automatically. Nativewind provides a simple, Tailwind CSS–like styling solution that improves development speed while ensuring a consistent design language.\n\n## Architectural and Technical Decisions\n\n- **Axios for API Calls:**  \n  An instance of Axios is configured (in `lib/api.ts`) to automatically include authentication tokens (retrieved from Zustand’s user store) in the request headers.\n\n- **Zustand for Global State Management:**  \n  Zustand is used as the global state management tool to maintain user data and authentication status. The state is accessible from anywhere in the application (e.g., from `lib/api.ts`).\n\n- **React Query for Data Caching:**  \n  React Query is used to cache API responses and handle background re-fetching and retries in case of network issues, improving performance and responsiveness.\n\n- **Nativewind for Styling:**  \n  Nativewind is adopted to simplify styling within React Native by using Tailwind CSS classes, ensuring a smooth and efficient styling workflow.\n\n- **Optimized Performance:**  \n  The app implements performance optimizations such as memoized components, stable callbacks via `useCallback` and `useMemo`, and skeleton loaders during data fetching to enhance perceived performance on slower networks and devices.\n\n## File Structure\n\nBelow is a snapshot of the mobile app’s file structure, which has been organized to separate screens, components, assets, and configuration files for clarity and scalability:\n\n```\n.\n├── app\n│   ├── _layout.tsx           // Global layout and navigation configurations\n│   ├── +not-found.tsx        // 404 fallback screen\n│   └── (tabs)                // Tab-based navigation structure\n│       ├── dashboard.tsx     // Dashboard screen displaying product list and admin actions\n│       ├── index.tsx         // Home screen with product listing, search filter, etc.\n│       ├── _layout.tsx       // Layout for tab screens\n│       ├── login.tsx         // Login screen\n│       └── product           // Product-related screens\n│           ├── add-or-edit.tsx // Screen for adding or editing a product\n│           ├── [id].tsx      // Individual product details screen\n│           └── _layout.tsx   // Layout for product screens\n├── assets                    // Images, fonts, and icons for the app\n│   ├── fonts\n│   │   └── SpaceMono-Regular.ttf\n│   └── images\n│       ├── adaptive-icon.png\n│       ├── favicon.png\n│       ├── icon.png\n│       └── splash-icon.png\n├── components                // Reusable UI components\n│   ├── LogoutButton.tsx\n│   ├── ProductCard.tsx\n│   ├── ProductForm.tsx\n│   └── SearchFilter.tsx\n├── context                   // Global context (user authentication)\n│   └── UserContext.tsx\n├── lib                       // Library utilities such as API configuration\n│   └── api.ts\n├── scripts                   // Utility scripts\n│   └── reset-project.js\n├── styles                    // Global styles\n│   └── global.css\n├── types                     // TypeScript type definitions\n│   └── index.ts\n├── app.json\n├── babel.config.js\n├── metro.config.js\n├── nativewind-env.d.ts\n├── package.json\n├── package-lock.json\n├── tailwind.config.js\n├── tsconfig.json\n└── README.md\n```\n\n## Setup \u0026 Configuration\n\n### Prerequisites\n\n- **Node.js \u0026 npm:** Ensure that you have Node.js installed. We recommend version 14 or later.\n- **Yarn (optional):** You may choose to use Yarn instead of npm.\n- **Expo CLI:** Install Expo CLI globally if you haven’t already:\n  ```bash\n  npm install -g expo-cli\n  ```\n\n### Local Setup Instructions\n\n1. **Clone the Repository:**\n   ```bash\n   git clone https://github.com/medea-learner/e-commerce-web-and-mobile-app.git\n   cd e-commerce-web-and-mobile-app/mobile-app\n   ```\n\n2. **Install Dependencies:**\n   ```bash\n   npm install\n   ```\n   Or, if you’re using Yarn:\n   ```bash\n   yarn install\n   ```\n\n3. **Configure Environment (if applicable):**  \n   Verify the API base URL in `lib/api.ts`. Adjust it if required to connect to your backend or a testing API.\n\n4. **Start the Expo Development Server:**\n   ```bash\n   expo start\n   ```\n   This command will launch the Expo development tools. You can then run the app on an emulator, simulator, or physical device.\n\n## Development Process\n\n- **Branching Strategy:**  \n  Use Git branches for feature development. Merge changes to the main branch only after code reviews and testing.\n\n- **Code Quality:**  \n  - Use TypeScript for type safety.\n  - Follow React Native best practices—performance optimizations include memoization and stable callbacks.\n  - Write descriptive commit messages.\n\n- **Testing:**  \n  Test API calls, navigation flows, and UI components on Android platform. Make use of Expo’s fast refresh for iterative development.\n\n- **Styling:**  \n  We use Nativewind to manage styles via Tailwind CSS classes. Update styles directly in the components for faster development iterations.\n\n## Usage \u0026 Running the App\n\nAfter starting the Expo development server:\n- **Run on Simulator or Emulator:**  \n  Use Expo tools or run:\n  ```bash\n  expo run:android\n  expo run:ios\n  ```\n- **Run on a Physical Device:**  \n  Download the Expo Go app from the iOS App Store or Google Play Store. Scan the QR code displayed in your terminal or Expo Dev Tools to open your app.\n\n## Additional Information\n\n- **Global State:**  \n  Zustand is used to manage user authentication details. Visit `context/UserContext.tsx` for more details.\n\n- **API Integration:**  \n  Axios is configured in `lib/api.ts` to include user tokens from the global state. Make sure to secure your API endpoints as needed.\n\n- **Caching and Data Management:**  \n  React Query handles API caching and retries. Refer to the documentation in the code comments within your screen components (e.g., `app/index.tsx`).\n\n- **Styling \u0026 Theming:**  \n  The styling conventions follow Nativewind’s Tailwind-inspired syntax. Modifications and customizations should be done in `tailwind.config.js`.\n\nGot it! Here’s the updated **Next.js Web App documentation** with the middleware section described **without showing any code**, just a mention of its functionality:\n\n---\n\n# Next.js Web App\n\nThe web app is built using [Next.js 15](https://nextjs.org). It consumes data from [FakeStoreAPI](https://fakestoreapi.com) and includes authentication, product management, filtering, and responsive design.\n\n---\n\n## Table of Contents\n\n- [Overview](#overview)  \n- [Architectural and Technical Decisions](#architectural-and-technical-decisions)  \n- [File Structure](#file-structure)  \n- [Setup \u0026 Configuration](#setup--configuration)  \n- [Development Process](#development-process)  \n- [Middleware Functionality](#middleware-functionality)  \n- [Usage \u0026 Running the App](#usage--running-the-app)  \n- [Additional Information](#additional-information)  \n\n---\n\n## Overview\n\nThe app provides users with a clean UI to browse products, filter by category, search by keyword, and view detailed product information. Admin users have access to a dashboard to create, edit, or delete products.\n\nAuthentication is handled using FakeStoreAPI’s login system, and Axios is used for all API communications.\n\n---\n\n## Architectural and Technical Decisions\n\n- **App Router (Next.js 15)** is used with layouts, dynamic routing, and route groups for modern structure and flexibility.\n\n- **Axios** is used to handle API requests with a pre-configured instance.\n\n- **Tailwind CSS** is used for fast and consistent styling.\n\n- **UserContext** manages global authentication state and allows access to user info across the app.\n\n- **Reusable Components**: Core components like `ProductCard` and `ProductForm` are shared across multiple screens with behavior adjusted by props and user roles.\n\n---\n\n## File Structure\n\n```\n.\n├── app\n│   ├── layout.tsx\n│   ├── (tabs)\n│   │   ├── index.tsx\n│   │   ├── dashboard.tsx\n│   │   └── product\n│   │       ├── [id].tsx\n│   │       └── _layout.tsx\n├── components\n│   ├── ProductCard.tsx\n│   ├── ProductForm.tsx\n│   ├── SearchFilter.tsx\n│   ├── Navbar.tsx\n├── context\n│   └── UserContext.tsx\n├── lib\n│   └── api.ts\n├── types\n│   └── index.ts\n├── middleware.ts\n├── public\n├── tailwind.config.ts\n├── tsconfig.json\n├── package.json\n└── README.md\n```\n\n---\n\n## Setup \u0026 Configuration\n\n1. Clone the project and install dependencies:\n\n```bash\ngit clone https://github.com/medea-learner/e-commerce-web-and-mobile-app.git\ncd e-commerce-web-and-mobile-app/web-app\nnpm install\n```\n\n2. Run the development server:\n\n```bash\nnpm run dev\n```\n\n---\n\n## Development Process\n\n- **Dashboard Admin Tools:** Admins can manage products from the dashboard with inline editing and deletion features.\n\n- **Product Modals:** Product creation and updates are handled via modals that reuse the same form structure with conditionally loaded data.\n\n- **Conditional Components:** `ProductCard` and others adapt their behavior based on the user's role via `UserContext`.\n\n- **Tailwind Design System:** Utility classes are used consistently throughout the app for styling, responsiveness, and layout control.\n\n---\n\n## Middleware Functionality\n\nThe middleware is used to **protect specific routes** (`/dashboard`), ensuring that only authenticated users (typically admins) can access them.\n\nWhen a user attempts to visit a protected route:\n\nThe middleware ensures centralized route access control without adding logic to each individual page component.\n\n---\n\n## Usage \u0026 Running the App\n\n### Public Features\n\n- `/products` - View all products, filter by category, search\n- `/product/[id]` - View product details\n\n### Admin Features\n\n- `/dashboard` - Admin-only dashboard to manage products\n- Add, Edit, and Delete products via modal form\n\n---\n\n## Additional Information\n\n- **Responsive Design:** Optimized for desktop and mobile browsers using Tailwind utilities.\n- **API Communication:** All API requests are made using Axios with optional authentication headers.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmedea-learner%2Fe-commerce-web-and-mobile-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmedea-learner%2Fe-commerce-web-and-mobile-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmedea-learner%2Fe-commerce-web-and-mobile-app/lists"}