Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/majkeloess/apollo
Fullstack social media platform for tracking and sharing your personal development journey, including fitness goals and knowledge acquisition
https://github.com/majkeloess/apollo
framer-motion html-css-javascript javascript nextauth nextjs nextjs14 prisma radix-ui react reactjs shadcn-ui social-media social-media-app tailwind-css typescript vercel zod
Last synced: 7 days ago
JSON representation
Fullstack social media platform for tracking and sharing your personal development journey, including fitness goals and knowledge acquisition
- Host: GitHub
- URL: https://github.com/majkeloess/apollo
- Owner: majkeloess
- License: mit
- Created: 2024-04-28T14:19:30.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-03T19:18:27.000Z (6 months ago)
- Last Synced: 2024-06-04T00:22:35.054Z (6 months ago)
- Topics: framer-motion, html-css-javascript, javascript, nextauth, nextjs, nextjs14, prisma, radix-ui, react, reactjs, shadcn-ui, social-media, social-media-app, tailwind-css, typescript, vercel, zod
- Language: TypeScript
- Homepage: https://apollo.majkeloess.dev
- Size: 4.74 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://apollo.majkeloess.dev)
# 👋 Introduction
**Apollo** is the largest project I'm currently working on. The idea behind Apollo is simple: it's a platform where you can connect with your friends and view their daily gym or endurance training activities on your feed.
Current version: *1.0*
The development of the project began on *9 April 2024*.
# ⚙️ Tech stack
- Next.js
- React.js
- TypeScript
- TailwindCSS
- Prisma
- Auth.js
- Framer motion
- Chart.js
- zod
# 🛠️ Features
🔋 **Authentication:** Securely authenticate users through Google OAuth.
🔋 **Authorization**: Implement role-based access control to manage user permissions.
🔋 **JWT Token Strategy**: Streamline user access by leveraging JSON Web Tokens (JWT) for authentication and authorization, eliminating the need for traditional account creation.
🔋 **Workout Tracking**: Enable users to easily add and track workouts, including the number of sets and load for each exercise.
🔋 **Data Collection & Storage**: The platform securely stores and maintains all data provided by users.
🔋 **Social Features (SSR)**: Enhance user engagement with server-side rendered (SSR) social features like following, liking, commenting on posts, and a personalized feed.
🔋 **Performance Charts**: Visualize training progress and data through interactive charts and graphs.
🔋 **Additional Content**: Incorporate relevant music playlists and articles to enhance the user experience.
🔋 **Responsive Design**: Ensure the platform adapts seamlessly to different screen sizes and devices for optimal viewing.
🔋 **Light/Dark Mode**: Provide users with the option to switch between light and dark themes for visual comfort.
and many more ...
# Installation
To run application locally you need to have `git`, `node.js` and `npm` installed locally on your machine.
## Cloning the repo and installing dependencies
```bash
git clone https://github.com/majkeloess/ApolloApp
cd ApolloApp
npm i
```
## Setting up environmentt variables
Change name of the `.env.example` file, into `.env` or `.env.local` .
```env
POSTGRES_URL=
DATABASE_URL=
POSTGRES_PRISMA_URL=
POSTGRES_URL_NO_SSL=
POSTGRES_URL_NON_POOLING=
POSTGRES_USER=
POSTGRES_HOST=
POSTGRES_PASSWORD=
POSTGRES_DATABASE=
AUTH_SECRET=
AUTH_GOOGLE_ID=-
AUTH_GOOGLE_SECRET=
```
You can get the first segment of environment variables from [Vercel](https://vercel.com). Log in -> Storage -> Create Database -> Postgres (Serverless SQL). On quickstart to your database you will have option to see your `.env.local`, just copy and paste.
Second segment stands for [Auth.js](https://authjs.dev) secret. To generate it, run the following command in your terminal:
```bash
openssl rand -base64 33
```
Then copy and paste the output into your file.
The final part involves connecting to your [Google console](https://console.cloud.google.com/). You'll need to create a new application that utilizes the Google OAuth API. This process is more involved than the previous steps, so please refer to this [YouTube video](https://www.youtube.com/watch?v=ot9yuKg15iA) for guidance.
## Connecting to prisma
```bash
npx prisma migrate dev
```
## Running the project
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
# 🔥 Future improvements
⚡ Modals for following, followers
⚡ Infinite scroll (SSR) for Feed
⚡ Pagination (SSR) for ProfileCard
⚡ Edit profile page, including: adding nickname, changing profile photo
⚡ Edit training
⚡ Leaderboards
⚡ Cooking recipes
⚡ Adding photos to training, recipe
⚡ Form validation (checking provided value, eg. link is link etc.)
⚡ Credentials and new providers
⚡ React Native app:)
# License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.