Skip to content

A React Native mobile application built with Expo that allows you to search and view 42 Network student profiles. Browse student information, projects, skills, and achievements through an intuitive and modern interface.

Notifications You must be signed in to change notification settings

Ra-Wo/Swifty-Companion

Repository files navigation

Swifty Companion

A React Native mobile application built with Expo that allows you to search and view 42 Network student profiles. Browse student information, projects, skills, and achievements through an intuitive and modern interface.

⚠️ Important Note

This app does NOT work on Expo Go. The project uses custom native modules and configurations that require a development build. You must use Expo Dev Client or create a standalone build to run this application.

🚀 Features

  • Profile Search: Search for any 42 student by their intra login
  • Comprehensive Profile View: View detailed student information including:
    • Personal information and profile picture
    • Cursus progress and level
    • Skills and expertise levels
    • Project history with scores and validation status
    • Campus and cohort information
  • Dark/Light Mode: Toggle between dark and light themes

🖼️ Screenshots

Screenshot 1 Screenshot 2 Screenshot 3
Screenshot 4 Screenshot 5 Screenshot 6

📋 Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (v18 or higher)
  • npm or yarn
  • Android Studio (for Android development)

42 API Credentials

You'll need to register an application on the 42 API:

  1. Go to 42 API
  2. Create a new application
  3. Note your UID and SECRET

🛠️ Installation

  1. Clone the repository:

    git clone https://github.com/Ra-Wo/Swifty-Companion.git
    cd Swifty-Companion
  2. Install dependencies:

    npm install
  3. Set up environment variables:

    Create a .env file in the root directory:

    EXPO_PUBLIC_42_API_URL=https://api.intra.42.fr
    EXPO_PUBLIC_42_API_UID=your_42_api_uid
    EXPO_PUBLIC_42_API_SECRET=your_42_api_secret
    
    # Optional: Only needed for Windows builds
    NINJA_PATH=C:/path/to/ninja.exe
  4. Prebuild the native projects (if needed):

    npm run prebuild

🏃‍♂️ Running the App

Development Build

  1. Install Expo Dev Client:

    npx expo install expo-dev-client
  2. Start the development server:

    npm start
  3. Run on Android device/emulator:

    npm run android

📱 Platform Support

  • Android: Fully supported
  • iOS: Not developed/tested
  • Expo Go: NOT supported

🎨 Tech Stack

  • Framework: Expo (~53.0.22) with Expo Router
  • Language: TypeScript
  • UI: React Native with NativeWind (Tailwind CSS)
  • Navigation: Expo Router (file-based routing)
  • State Management: Zustand
  • Storage: AsyncStorage
  • Fonts: Poppins, Inter
  • Styling: Class Variance Authority + Tailwind Merge
  • API: 42 Network API

📂 Project Structure

.
├── app/                    # App screens (file-based routing)
│   ├── _layout.tsx        # Root layout
│   ├── index.tsx          # Home/Search screen
│   └── profile.tsx        # Profile screen
├── components/            # Reusable components
│   ├── profile-page/      # Profile-specific components
│   └── ui/                # UI primitives
├── constants/             # App constants
├── hooks/                 # Custom React hooks
├── lib/                   # Utilities and API functions
├── store/                 # Zustand stores
├── types/                 # TypeScript type definitions
├── assets/                # Images and static assets
└── android/               # Android native project

🔧 Available Scripts

  • npm start - Start the development server with Expo Dev Client
  • npm run android - Run on Android device/emulator
  • npm run web - Run in web browser (experimental)
  • npm run lint - Run ESLint and Prettier checks
  • npm run format - Format code with ESLint and Prettier
  • npm run prebuild - Generate native projects

🎯 Usage

  1. Launch the app on your device
  2. Enter a 42 student's intra login (e.g., roudouch)
  3. Tap "Search" to view their profile
  4. Browse through their projects, skills, and statistics
  5. Toggle between dark and light modes using the theme switch

🔑 Configuration

App Configuration

The app configuration is managed in app.config.ts. Key settings include:

  • App name and slug
  • Platform-specific configurations
  • Plugins and native modules
  • Windows-specific CMake fixes (for development)

API Configuration

API endpoints and credentials are managed through environment variables. Make sure to set up your .env file with valid 42 API credentials.

🐛 Troubleshooting

"This app doesn't work on Expo Go"

This is expected. You must create a development build or use EAS Build.

Android Build Issues on Windows

If you encounter CMake build issues on Windows, ensure the NINJA_PATH environment variable is set to your Ninja executable path.

📄 License

This project is created as part of the 42 Network curriculum.

👤 Author

Rachid Oudouch

About

A React Native mobile application built with Expo that allows you to search and view 42 Network student profiles. Browse student information, projects, skills, and achievements through an intuitive and modern interface.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published