adrianhajdin / aora

Build your first mobile application

Video Sharing App

Build this project step by step with our detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🕸️ Snippets
6. 🔗 Links
7. 🚀 More

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

🤖 Introduction

Built with React Native for seamless user experiences, Animatable for captivating animations, and integrated with the dependable backend systems of Appwrite, this app showcases impressive design and functionality, enabling seamless sharing of AI videos within the community.

If you're getting started and need assistance or face any bugs, join our active Discord community with over 27k+ members. It's a place where people help each other out.

⚙️ Tech Stack

• React Native
• Expo
• Nativewind
• Animatable
• Appwrite

🔋 Features

👉 Onboarding Screen: Engaging graphics and clear instructions welcome users to the app.

👉 Robust Authentication & Authorization System: Secure email login safeguards user accounts.

👉 Dynamic Home Screen with Animated Flat List: Smoothly animated flat list showcases the latest videos for seamless browsing.

👉 Pull-to-Refresh Functionality: Users can refresh content with a simple pull gesture for up-to-date information.

👉 Full-Text Search Capability: Efficiently search through videos with real-time suggestions and instant results.

👉 Tab Navigation: Navigate between sections like Home, Search, and Profile with ease using tab navigation.

👉 Post Creation Screen for Uploading Media: Upload video and image posts directly from the app with integrated media selection.

👉 Profile Screen with Detailed Insights: View account details and activity, including uploaded videos and follower count, for a personalized experience.

👉 Responsiveness: Smooth performance and adaptability across various devices and screen sizes for a consistent user experience.

👉 Animations: Dynamic animations using the Animatable library to enhance user interaction and engagement throughout the app's UI.

and many more, including code architecture and reusability

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/adrianhajdin/aora.git
cd aora

Installation

Install the project dependencies using npm:

npm install

Running the Project

npm start

Expo Go

Download the Expo Go app onto your device, then use it to scan the QR code from Terminal and run.

🕸️ Snippets

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#161622",
        secondary: {
          DEFAULT: "#FF9C01",
          100: "#FF9001",
          200: "#FF8E01",
        },
        black: {
          DEFAULT: "#000",
          100: "#1E1E2D",
          200: "#232533",
        },
        gray: {
          100: "#CDCDE0",
        },
      },
      fontFamily: {
        pthin: ["Poppins-Thin", "sans-serif"],
        pextralight: ["Poppins-ExtraLight", "sans-serif"],
        plight: ["Poppins-Light", "sans-serif"],
        pregular: ["Poppins-Regular", "sans-serif"],
        pmedium: ["Poppins-Medium", "sans-serif"],
        psemibold: ["Poppins-SemiBold", "sans-serif"],
        pbold: ["Poppins-Bold", "sans-serif"],
        pextrabold: ["Poppins-ExtraBold", "sans-serif"],
        pblack: ["Poppins-Black", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Font Loaded

const [fontsLoaded, error] = useFonts({
  "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
  "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
  "Poppins-ExtraBold": require("../assets/fonts/Poppins-ExtraBold.ttf"),
  "Poppins-ExtraLight": require("../assets/fonts/Poppins-ExtraLight.ttf"),
  "Poppins-Light": require("../assets/fonts/Poppins-Light.ttf"),
  "Poppins-Medium": require("../assets/fonts/Poppins-Medium.ttf"),
  "Poppins-Regular": require("../assets/fonts/Poppins-Regular.ttf"),
  "Poppins-SemiBold": require("../assets/fonts/Poppins-SemiBold.ttf"),
  "Poppins-Thin": require("../assets/fonts/Poppins-Thin.ttf"),
});

useEffect(() => {
  if (error) throw error;

  if (fontsLoaded) {
    SplashScreen.hideAsync();
  }
}, [fontsLoaded, error]);

if (!fontsLoaded && !error) {
  return null;
}

Dummy Videos for Appwrite

const videos = [
  {
    title: "Get inspired to code",
    thumbnail:
      "https://i.ibb.co/tJBcX20/Appwrite-video.png",
    video:
      "https://player.vimeo.com/video/949579770?h=897cd5e781",
    prompt:
      "Create a motivating AI driven video aimed at inspiring coding enthusiasts with simple language",
  },
  {
    title: "How AI Shapes Coding Future",
    thumbnail:
      "https://i.ibb.co/Xkgk7DY/Video.png",
    video:
      "https://player.vimeo.com/video/949581999?h=4672125b31",
    prompt: "Picture the future of coding with AI. Show AR VR",
  },
  {
    title: "Dalmatian's journey through Italy",
    thumbnail:
      "https://i.ibb.co/CBYzyKh/Video-1.png",
    video:
      "https://player.vimeo.com/video/949582778?h=d60220d68d",
    prompt:
      "Create a heartwarming video following the travels of dalmatian dog exploring beautiful Italy",
  },
  {
    title: "Meet small AI friends",
    thumbnail:
      "https://i.ibb.co/7XqVPVT/Photo-1677756119517.png",
    video:
      "https://player.vimeo.com/video/949616422?h=d60220d68d",
    prompt:
      "Make a video about a small blue AI robot blinking its eyes and looking at the screen",
  },
  {
    title: "Find inspiration in Every Line",
    thumbnail:
      "https://i.ibb.co/mGfCYJY/Video-2.png",
    video:
      "https://player.vimeo.com/video/949617485?h=d60220d68d",
    prompt:
      "A buy working on his laptop that sparks excitement for coding, emphasizing the endless possibilities and personal growth it offers",
  },
  {
    title: "Japan's Blossoming temple",
    thumbnail:
      "https://i.ibb.co/3Y2Nk7q/Bucket-215.png",
    video:
      "https://player.vimeo.com/video/949618057?h=d60220d68d",
    prompt: "Create a captivating video journey through Japan's Sakura Temple",
  },
  {
    title: "A Glimpse into Tomorrow's VR World",
    thumbnail:
      "https://i.ibb.co/C5wXXf9/Video-3.png",
    video:
      "https://player.vimeo.com/video/949620017?h=d60220d68d",
    prompt: "An imaginative video envisioning the future of Virtual Reality",
  },
  {
    title: "A World where Ideas Grow Big",
    thumbnail:
      "https://i.ibb.co/DzXRfyr/Bucket-59038.png",
    video:
      "https://player.vimeo.com/video/949620200?h=d60220d68d",
    prompt:
      "Make a fun video about hackers and all the cool stuff they do with computers",
  },
];

🔗 Links

Assets and constants used in the project can be found here

🚀 More

Advance your skills with Next.js 14 Pro Course

Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!

Accelerate your professional journey with the Expert Training program

And if you're hungry for more than just a course and want to understand how we learn and tackle tech challenges, hop into our personalized masterclass. We cover best practices, different web skills, and offer mentorship to boost your confidence. Let's learn and grow together!

aora's Issues

Video playback error: db.w0: None of the available extractors (c, d, b, g, k, b, a0, d, h0, e, h, b, e, f, b, a) could read the stream.

can anyone help me to fix this error?

Video not playing on device (IOS)

Got to the video portion at around the 3 hour mark and fonud that the videos weren't loading. I added the onError property to the

The server is not correctly configured. - The AVPlayerItem instance has failed with the error code -11850 and domain "AVFoundationErrorDomain"

Here's the code I have related to this error

import { ResizeMode, Video } from "expo-av";
.
.
.
                <Video
                    source={{ uri: item.video}}
                    className="w-52 h-72 rounded-[33px] mt-3 bg-white/10"
                    resizeMode={ResizeMode.CONTAIN}
                    useNativeControls
                    shouldPlay
                    onPlaybackStatusUpdate={(status) => {
                    if (status.didJustFinish) {
                        setPlay(false);
                    }
                    }}
                    onError={(error) => {
                        console.error("Video error: ", error); // Log the error
                    }}
                />

I think it's my device but not sure how to fix it

fontFamily "Poppins-SemiBold" is not a system font and has not been loaded through expo-font.

I'm getting this following error.

ERROR TypeError: Cannot read property 'useMemo' of null

The below error message is coming after the prerequisite completion and running the app on mobile.

ERROR TypeError: Cannot read property 'useMemo' of null

This error is located at:
in ContextNavigator (at ExpoRoot.js:64)
in ExpoRoot (at qualified-entry.js:20)
in App (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay (at withDevTools.js:18)
in withDevTools(ErrorOverlay) (at renderApplication.js:57)
in RCTView (at View.js:116)
in View (at AppContainer.js:127)
in RCTView (at View.js:116)
in View (at AppContainer.js:155)
in AppContainer (at renderApplication.js:50)
in main(RootComponent) (at renderApplication.js:67), js engine: hermes

This error is located at:
in ContextNavigator (at ExpoRoot.js:64)
in ExpoRoot (at qualified-entry.js:20)
in App (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay (at withDevTools.js:18)
in withDevTools(ErrorOverlay) (at renderApplication.js:57)
in RCTView (at View.js:116)
in View (at AppContainer.js:127)
in RCTView (at View.js:116)
in View (at AppContainer.js:155)
in AppContainer (at renderApplication.js:50)
in main(RootComponent) (at renderApplication.js:67), js engine: hermes

Font not working properly on android

the font is not loading properly, the next warning shows up when running the app and adding font-psemibold to CustomButton
WARN fontFamily "Poppins-SemiBold" is not a system font and has not been loaded through expo-font.
note: i copied the code from the original repo and the font folder is in the correct place ./assets/fonts/Poppins-Bold.ttf

AppwiteException:Missing required parameter: "bucketId"

Getting Error in Create Post

1. I got this error "Error: TypeError: Cannot read property '$id' of undefined " and now i implemented if else condition to check the uploaded file if it exists or not..... after that i got the else statement that the file upload failed.

2. Currently there another issue with appwrite which is "video and thumbnail are required" even though i have uploaded them from my local phone storage, I can't still make the file submission to the database

3. I am also getting cannot read property 'username' of null in the home.jsx page

Render Error - Cannot read property of "isLoading" of undefined

` const { isLoading, isLoggedIn } = useGlobalContext();

if (!isLoading && isLoggedIn) return ;`

This error comes from the index.jsx file when we are trying to set global state so that when you close the app you remain loggedIn but It does not work for me. I will include my Index.jsx and Globalprovider file.

Index.jsx:
`
import { Link, Redirect, router } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { ScrollView, Text, View, Image } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { images } from "../constants";
import CustomButton from "../components/CustomButton";
import { useGlobalContext, GlobalProvider } from "../context/GlobalProvider";

export default function App() {
const { isLoading, isLoggedIn } = useGlobalContext();

if (!isLoading && isLoggedIn) return ;

return (

<ScrollView contentContainerStyle={{ height: "100%" }}>





Discover endless possibilities with{" "}
Aora

        <Image
          source={images.path}
          className="w-[136px] h-[15px] absolute -bottom-2 -right-8"
          resizeMode="contain"
        />
      </View>
      <Text className="text-sm font-pregular text-gray-100 mt-7 text-center">
        Where Creativity meets innovation: embark on a journey of limitless
        exploration with Aora
      </Text>

      <CustomButton
        title="Continue with Email"
        handlePress={() => router.push("/sign-in")}
        containerStyles="w-full mt-7"
      />
    </View>
  </ScrollView>

  <StatusBar backgroundColor="#161622" style="light" />
</SafeAreaView>

);
}

`

Globalprovider:
`import { createContext, useContext, useEffect, useState } from "react";
import { getCurrentUser } from "../lib/appwrite";

const GlobalContext = createContext();
export const useGlobalContext = () => useContext(GlobalContext);

const GlobalProvider = ({ children }) => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
getCurrentUser()
.then((res) => {
if (res) {
setIsLoggedIn(true);
setUser(res);
} else {
setIsLoggedIn(false);
setUser(null);
}
})
.catch((error) => {
console.log(error);
})
.finally(() => {
setIsLoading(false);
});
}, []);
return (
<GlobalContext.Provider
value={{ isLoggedIn, setIsLoggedIn, user, setUser, isLoading }}
>
{children}
</GlobalContext.Provider>
);
};
export default GlobalProvider;
`

[AppwriteException: Network request failed]

When I click on sign up button createUser function I'm getting AppwriteExcpetion Error Sometimes it works and it doesn't I need help in this

Expo app crashing after splash / login screen but it's perfectly on expo go development mode

I created an expo app and it's running completely fine in expo go app but when I make build (apk) using the command

eas build -p android --profile preview

and install it on my phone. It opens but closes automatically after login . I've tried multiple times so please help.

Invalid Sample Video Thumbnail URLs

The URLs for the dummy video's thumbnails are invalid.

Warning: Each child in a list should have a unique "key" prop.

I got an error in home.jsx in flatlist.

Render Error Module "23" is missing

Getting Render Error with Expo v51
Module "23" is missing from the asset registry

Can't able to get the data in the logs

I was doing everything fine, until at the timestamp of 1:45:25 , where when I hit the Sign In button, instead of showing me the datas in as in the log , I was shown with the error mentioned below , could anyone help me to solve this problem ?

It may be a simple problem , but since I'm new ,can't able to figure that on my own . . .

AppwriteException: Network request failed

I get AppwriteException: Network request failed, when I click signup at time: 1:44:19.

Can someone help?

Error while developing the VideoCard.jsx Component

Everything going pretty good with this application, But at the time stamp of 2:40:36 , When i gave the same code as same him , at while supplying the video as parameter to the component , mainly while at the creator: {username, avatar} I was getting this below mentioned error . . . .

When I remove that particular part , ie thaat creator code part , the code works pretty fine . . .

can some one give me the reason , for what causes this error ? and help me to solve this error ?

in video card, dummy video link and thumb nail link have issue

here is the response for the video link and thumbnail link, is there a way not upgrade and use it?
{"message":"Bandwidth limit for your organization has exceeded. Please upgrade to higher plan or update budget cap.","code":402,"type":"bandwidth_limit_exceeded","version":"0.13.6"}

Can't setup Nativewind for the app!

I have installed all the necessary dependencies for nativewindcss with tailwindcss version ^3.3.2.
I don't know why nativewind is not working on the app.
I also recreated the whole app and after installing the nativewind and doing changes in tailwind.config.js I have also restarted the development server of the app.
But still no luck. 🥲

Sample Videos not playing

The video urls given for sample videos aren't playing in finished app or new tab, on opening this link in new tab for eg:
URL: https://cloud.appwrite.io/v1/storage/buckets/660d0e59e293896f1eaf/files/660f004955f51e7e3212/view?project=660d0e00da0472f3ad52
Response:
{
"message": "Bandwidth limit for your organization has exceeded. Please upgrade to higher plan or update budget cap.",
"code": 402,
"type": "bandwidth_limit_exceeded",
"version": "0.12.148"
}

Issues with Videos Collection Update and Index Creation

Hello Guys, I would like to bring to your attention some challenges I've encountered while building the project by following the tutorial:

1. Videos Collection Update Issue:
Upon review, I've noticed that the videos collection is not updating as expected. Despite attempts to make modifications, the changes are not reflecting in the collection.

2. Videos Collection Attribute Update Problem:
Additionally, I've encountered difficulties updating attributes within the videos collection. Despite efforts to modify attributes, they remain unchanged, impacting the integrity of our data.

3. Videos Collection Index Creation Failure:
Furthermore, I've observed that the indexes for the videos collection are not being created. This is hindering our ability to efficiently access and manage the data within the collection.

I kindly request your assistance in addressing these issues promptly. If further information or clarification is needed, please do not hesitate to reach out.

Thank you for your attention to this matter.

putting real username in home.jsx

you have written jsmMastry in username in home instead you can can import Globalcontext user and put user.username in place of JSMastery

AppwriteException: Searching by attribute "title" requires a fulltext index

Has anyone encountered that issue recently? Been following the guide step-by-step and at the timestamp 3:16:54 of the video it happened in my case.

I managed to "fix" the problem by creating a fulltext index in videos database and assigning it to title attribute but I'm not 100% sure if it is a correct approach

Why does it take a very long time for the video to play?

My app keeps on taking a longer time to play the video. I am in Africa and I made my region Frankurt.😪😪

[Error: AppwriteException: User (role: guests) missing scope (account)]

how to fix this whenever i try to signup the page this error occur

Black bar above the nav/tab bar.

Above the nav bar there is a black block that doesnt allow anything to be seen under it.

How do i remove the redundant space above the navbar?

Appwrite database index are on stuck and i cannot delete

Creation of a session is prohibited when a session is active

the method for signUp works perfectly and also in the database the user is being added but while trying to login using the same credentials i get this error "Creation of a session is prohibited when a session is active" which wont show even in the terminal where it have occurred

recieving this error 'Module "3" is missing from the asset registry'

so after pasting and importing useEffects from readme file i got this error
The Error description is:
This error is located at:
in RootLayout (at useScreens.js:112)
in Unknown (at useScreens.js:116)
in Suspense (at useScreens.js:115)
in Route (at useScreens.js:131)
in Route() (at ExpoRoot.js:128)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
in SafeAreaProvider (at ExpoRoot.js:57)
in wrapper (at ExpoRoot.js:127)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:433)
in BaseNavigationContainer (at NavigationContainer.native.js:105)
in ThemeProvider (at NavigationContainer.native.js:104)
in NavigationContainerInner (at ExpoRoot.js:123)
in ContextNavigator (at ExpoRoot.js:66)
in ExpoRoot (at qualified-entry.js:20)
in App (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay (at withDevTools.js:18)
in withDevTools(ErrorOverlay) (at renderApplication.js:57)
in RCTView (at View.js:116)
in View (at AppContainer.js:127)
in RCTView (at View.js:116)
in View (at AppContainer.js:155)
in AppContainer (at renderApplication.js:50)
in main(RootComponent) (at renderApplication.js:67), js engine: hermes

Property 'setUser' doesn't exist

Error
Property 'setUser' doesn't exist

While trying to login to account getting this error after account creation.
Also not getting to home screen also after registration.

ERROR TypeError: Cannot read property 'username' of null after registration new user and login

ERROR TypeError: Cannot read property 'username' of null on all pages where it uses after register new user and login

Playing a video from the VideoCard component ListHeaderComponent disappears

When a video is played on the Home screen in the VideoCard component, the ListHeaderComponent disappears

video5004055281194238821.mp4

' WARN Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom <Layout />. Update Layout Route at: "app/(tabs)/_layout"'

if someone else facing the same warning issue you need to remove these "{' '}". Your welcome.

Help me to solve this problem

I don't knw what makes this error, since I'm a newbie , I dont knw what makes this error , I was getting this at the timestamp 02:06:21