Skip to content

Commit 1d2736a

Browse files
Aerospace-progAerospace-prog
committed
Completed the project
1 parent 82d67f2 commit 1d2736a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+5071
-917
lines changed

‎README.md‎

Lines changed: 66 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,89 @@
1-
# Welcome to your Expo app 👋
1+
# 🌟 Spotlight Social App
22

3-
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
3+
Spotlight is a modern, mobile-first social media app built with React Native and Expo. Share your moments, connect with friends, and discover new people—all in a beautiful, easy-to-use interface.
44

5-
## Get started
5+
---
66

7-
1. Install dependencies
7+
## ✨ Features at a Glance
88

9+
| Feature | Description |
10+
|------------------------|------------------------------------------------------------------|
11+
| Real-time Feed | See posts and stories from people all over the world |
12+
| Create Your Profile | Add a photo, your name, and a short bio |
13+
| Follow Friends | Find and follow people by name or username |
14+
| Notifications | Get notified when someone likes, comments, or follows you |
15+
| Search | Quickly find users by name or username |
16+
| Modern UI | Smooth cards, rounded corners, shadows, and friendly empty states |
17+
| Loading Spinners | Stylish loader while content is loading |
18+
| Mobile-First | Works great on all devices |
19+
20+
---
21+
22+
## 📱 Screenshots
23+
24+
> _Add your screenshots here for a visual preview!_
25+
26+
| Home Feed | Profile | Notifications |
27+
|-----------|---------|---------------|
28+
| ![Feed](./assets/images/screenshot-feed.png) | ![Profile](./assets/images/screenshot-profile.png) | ![Notifications](./assets/images/screenshot-notifications.png) |
29+
30+
---
31+
32+
## 🚀 How to Use Spotlight
33+
34+
1. **Download the app** (link from your app store or APK)
35+
2. **Sign up or log in**
36+
3. **Set up your profile**
37+
4. **Start posting, following, and connecting!**
38+
39+
No tech skills needed—just download, open, and enjoy!
40+
41+
---
42+
43+
## 🛠️ Developer Setup
44+
45+
1. **Install dependencies**
946
```bash
1047
npm install
1148
```
12-
13-
2. Start the app
14-
49+
2. **Start the app**
1550
```bash
1651
npx expo start
1752
```
53+
- Open in Expo Go, Android emulator, or iOS simulator.
1854

19-
In the output, you'll find options to open the app in a
55+
3. **Edit the code**
56+
- All app code is in the `app` directory (file-based routing).
57+
- Components, styles, and backend logic are organized for easy development.
2058

21-
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
22-
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
23-
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
24-
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
59+
---
2560

26-
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
61+
## 💡 Learn More
62+
- [Expo documentation](https://docs.expo.dev/)
63+
- [React Native docs](https://reactnative.dev/)
64+
- [Convex backend docs](https://docs.convex.dev/)
2765

28-
## Get a fresh project
66+
---
2967

30-
When you're ready, run:
68+
## ❓ FAQ
3169

32-
```bash
33-
npm run reset-project
34-
```
70+
**Q: Is Spotlight free to use?**
71+
A: Yes! You can download and use Spotlight for free.
3572

36-
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
73+
**Q: Do I need to be a techie to use Spotlight?**
74+
A: Not at all! Spotlight is designed for everyone—just download and enjoy.
3775

38-
## Learn more
76+
**Q: How do I report a bug or give feedback?**
77+
A: See the contact section below.
3978

40-
To learn more about developing your project with Expo, look at the following resources:
79+
---
4180

42-
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
43-
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
81+
## 📬 Contact & Feedback
4482

45-
## Join the community
83+
Have questions, feedback, or want to report a bug?
84+
- Email: [your-email@example.com]
85+
- Or open an issue in this repo
4686

47-
Join our community of developers creating universal apps.
87+
---
4888

49-
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
50-
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
89+
**Enjoy Spotlight! If you have feedback or questions, let us know!**

‎app.json‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎app/(auth)/login.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { View, Text , Image, TouchableOpacity} from 'react-native'
2+
import React from 'react'
3+
import { styles } from '@/styles/auth.styles'
4+
import { Ionicons } from '@expo/vector-icons'
5+
import { COLORS } from '@/constants/theme'
6+
import { useSSO } from '@clerk/clerk-expo'
7+
import { useRouter } from "expo-router";
8+
9+
export default function login() {
10+
11+
const {startSSOFlow} = useSSO();
12+
const router = useRouter();
13+
14+
const handleGoogleSignIn = async() => {
15+
try{
16+
const {createdSessionId , setActive} = await startSSOFlow({strategy : 'oauth_google'})
17+
18+
if(setActive && createdSessionId){
19+
setActive({session : createdSessionId})
20+
router.replace("/(tabs)")
21+
}
22+
}catch(error){
23+
console.error("Error during Google Sign-In:", error)
24+
}
25+
}
26+
return (
27+
<View style = {styles.container}>
28+
<View style = {styles.brandSection}>
29+
<View style = {styles.logoContainer}>
30+
<Ionicons name='leaf' size = {32} color={COLORS.primary}/>
31+
</View>
32+
<Text style = {styles.appName}>Spotlight</Text>
33+
<Text style = {styles.tagline}>Your personal spotlight</Text>
34+
</View>
35+
36+
<View style = {styles.illustrationContainer}>
37+
<Image
38+
source = {require('../../assets/images/authbg.png')}
39+
style = {styles.illustration}
40+
resizeMode = "cover"
41+
/>
42+
</View>
43+
44+
<View style = {styles.loginSection}>
45+
<TouchableOpacity
46+
style = {styles.googleButton}
47+
onPress={handleGoogleSignIn}
48+
activeOpacity={0.9}
49+
>
50+
<View style = {styles.googleIconContainer}>
51+
<Ionicons name='logo-google' size = {24} color={COLORS.surface}/>
52+
</View>
53+
<Text style = {styles.googleButtonText}>Sign in with Google</Text>
54+
</TouchableOpacity>
55+
<Text style = {styles.termsText}>
56+
By signing in, you agree to our <Text style = {styles.termsLink}>Terms of Service</Text> and <Text style = {styles.termsLink}>Privacy Policy</Text>.
57+
</Text>
58+
</View>
59+
</View>
60+
)
61+
}

‎app/(tabs)/_layout.tsx‎

Lines changed: 44 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,50 @@
1+
import { Ionicons } from '@expo/vector-icons';
12
import { Tabs } from 'expo-router';
2-
import React from 'react';
3-
import { Platform } from 'react-native';
4-
5-
import { HapticTab } from '@/components/HapticTab';
6-
import { IconSymbol } from '@/components/ui/IconSymbol';
7-
import TabBarBackground from '@/components/ui/TabBarBackground';
8-
import { Colors } from '@/constants/Colors';
9-
import { useColorScheme } from '@/hooks/useColorScheme';
3+
import { COLORS } from '../../constants/theme';
104

115
export default function TabLayout() {
12-
const colorScheme = useColorScheme();
13-
146
return (
157
<Tabs
16-
screenOptions={{
17-
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
18-
headerShown: false,
19-
tabBarButton: HapticTab,
20-
tabBarBackground: TabBarBackground,
21-
tabBarStyle: Platform.select({
22-
ios: {
23-
// Use a transparent background on iOS to show the blur effect
24-
position: 'absolute',
25-
},
26-
default: {},
27-
}),
28-
}}>
29-
<Tabs.Screen
30-
name="index"
31-
options={{
32-
title: 'Home',
33-
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
34-
}}
35-
/>
36-
<Tabs.Screen
37-
name="explore"
38-
options={{
39-
title: 'Explore',
40-
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
41-
}}
42-
/>
8+
screenOptions={{
9+
tabBarShowLabel : false,
10+
headerShown : false,
11+
tabBarActiveTintColor: COLORS.primary,
12+
tabBarInactiveTintColor : COLORS.grey,
13+
tabBarStyle : {
14+
backgroundColor : "black",
15+
position : "absolute",
16+
borderTopWidth : 0,
17+
height : 40,
18+
elevation : 0,
19+
paddingBottom : 8
20+
}
21+
}}
22+
>
23+
<Tabs.Screen name="index"
24+
options={{
25+
tabBarIcon : ({size , color})=> <Ionicons name = "home" size={size} color={color} />
26+
}}
27+
/>
28+
<Tabs.Screen name="bookmarks"
29+
options={{
30+
tabBarIcon : ({size , color}) => <Ionicons name = "bookmark" size = {size} color = {color}/>
31+
}}
32+
/>
33+
<Tabs.Screen name="create"
34+
options={{
35+
tabBarIcon : ({size , color})=> <Ionicons name = "add-circle" size = {size} color={COLORS.primary}/>
36+
}}
37+
/>
38+
<Tabs.Screen name="notifications"
39+
options={{
40+
tabBarIcon : ({size , color})=> <Ionicons name = "heart" size = {size} color={color}/>
41+
}}
42+
/>
43+
<Tabs.Screen name="profile"
44+
options={{
45+
tabBarIcon : ({size , color})=> <Ionicons name = "person-circle" size = {size} color={color}/>
46+
}}
47+
/>
4348
</Tabs>
44-
);
45-
}
49+
)
50+
}

‎app/(tabs)/bookmarks.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { View, Text, ScrollView } from 'react-native'
2+
import React from 'react'
3+
import { useQuery } from 'convex/react'
4+
import { api } from '@/convex/_generated/api';
5+
import { Loader } from '@/components/Loader';
6+
import { COLORS } from '@/constants/theme';
7+
import { Image } from 'expo-image';
8+
import { styles } from '@/styles/feed.styles';
9+
10+
export default function Bookmarks() {
11+
12+
const bookmarkedPosts = useQuery(api.bookmarks.getBookmarkedPosts);
13+
14+
if(bookmarkedPosts === undefined) return <Loader/>
15+
if(bookmarkedPosts.length === 0) return <NoBookmarksFound/>
16+
17+
return (
18+
<View style={styles.container}>
19+
<View style={styles.header}>
20+
<Text style={styles.headerTitle}>Bookmarks</Text>
21+
</View>
22+
23+
{/* POSTS */}
24+
<ScrollView
25+
contentContainerStyle={{
26+
padding: 8,
27+
flexDirection: "row",
28+
flexWrap: "wrap",
29+
}}
30+
>
31+
{bookmarkedPosts.map((post) => {
32+
if (!post) return null;
33+
return (
34+
<View key={post._id} style={{ width: "33.33%", padding: 1 }}>
35+
<Image
36+
source={post.imageUrl}
37+
style={{ width: "100%", aspectRatio: 1 }}
38+
contentFit="cover"
39+
transition={200}
40+
cachePolicy="memory-disk"
41+
/>
42+
</View>
43+
);
44+
})}
45+
</ScrollView>
46+
</View>
47+
);
48+
}
49+
50+
function NoBookmarksFound() {
51+
return (
52+
<View
53+
style={{
54+
flex: 1,
55+
justifyContent: "center",
56+
alignItems: "center",
57+
backgroundColor: COLORS.background,
58+
}}
59+
>
60+
<Text style={{ color: COLORS.primary, fontSize: 22 }}>No bookmarked posts yet</Text>
61+
</View>
62+
);
63+
}

0 commit comments

Comments
 (0)