/Epicture

Imgur's app clone in React-Native with Expo

Primary LanguageTypeScript

Epicture

Epicture is an EPITECH school project, the goal is to create a mobile app based on the imgur API.
The app is built with Expo (React Native) and is written in Typescript

Requirements

The Expo Client App

With Expo, you don't have to manyally install the built APK or IPA on your phone.
The Expo App will load the JS bundle and allow you to test my Epicture app without deploying it or building it with Android Studio/XCode

Download links:

An imgur account

The app requires you to login with an imgur account, with email and password only: auth with Google or Social medias are not supported. You can create an account on the imgur website.

Run the App with no install

If you want to test the app without building local code, it is very simple:

  • Install the expo app and create your imgur account
  • Visist the expo dev page of the project and scan the QR Code with the Expo app or your phone camera
  • Enjoy the app with your Imgur account

Build the app

Create an imgur Oauth2 application

The Oauth2 application is required to request the public API. A callback URL is set in the app and is depedent of you IP because of how Expo works. The calback URL must be exp://your_dev_server_address

  • create the Oauth App here.
  • replace the callback URL and client id variables in the .env.example by your own
  • rename the the .env.example to .env.

Run with Expo

To launch the app:

  • Install the expo client on your phone
  • Run yarn install to install dependencies
  • Run yarn start to start the development server
  • Scan the QR code displayed in your terminal with your phone

App Preview

Feed

Search

Favorites

Profile

Upload

Code Structure

├── App.tsx                       <-- Main component of the App
├── assets
│   └── ...
├── components                    <-- All components used/re-used in screens
│   ├── Buttons
│   │   └── LoginButton.tsx
│   ├── Checkbox.tsx
│   ├── FilterModal.tsx
│   ├── PictureCard
│   │   ├── BigPictureCard.tsx
│   │   ├── SmallPictureCard.tsx
│   │   └── UploadPictureCard.tsx
│   ├── Skeleton.tsx
│   └── Svg
│       └── ...
├── constants                     <-- Constant variables like screen size
│   ├── Colors.ts
│   └── Layout.ts
├── hooks                         <-- Functions to reduce components complexity
│   └── ...
├── navigation                    <-- Navigation schemas
│   ├── AuthNavigator.tsx
│   ├── BottomTabNavigator.tsx
│   ├── index.tsx
│   └── ProfileTabNavigator.tsx
├── network                       <-- API calls
│   ├── album.ts
│   ├── gallery.ts
│   ├── image.ts
│   └── user.ts
├── screens                       <-- App screens and subscreens
│   ├── AuthScreen.tsx
│   ├── FavoriteScreen.tsx
│   ├── HomeScreen.tsx
│   ├── PictureScreen.tsx
│   ├── ProfileScreens
│   │   ├── ProfileAboutScreen.tsx
│   │   ├── ProfilePostsScreen.tsx
│   │   └── ProfileSettingsScreen.tsx
│   ├── ProfileScreen.tsx
│   ├── SearchScreen.tsx
│   ├── UploadScreens
│   │   ├── Camera.tsx
│   │   └── PostDraft.tsx
│   └── UploadScreen.tsx
├── types                         <-- types and interfaces
│   └── ...
└── utils                         <-- Authentication context
    └── auth.tsx

Authors