Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ahmedrafat-sw/reddit-ui

Reddit clone application built using Spring Boot, Spring Security, Hibernate, Angular, Tailwind CSS, and MySQL. The project mimics the core functionality of Reddit, providing a platform for users to post content, comment, upvote, and downvote posts, while incorporating robust security features like OAuth2 authentication, JWT authorization
https://github.com/ahmedrafat-sw/reddit-ui

angular angular-cli angular-material css html tailwind-css typescript

Last synced: 13 days ago
JSON representation

Host: GitHub
URL: https://github.com/ahmedrafat-sw/reddit-ui
Owner: ahmedrafat-SW
Created: 2023-11-01T21:03:59.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-12-18T21:06:28.000Z (about 1 month ago)
Last Synced: 2024-12-18T22:19:50.465Z (about 1 month ago)
Topics: angular, angular-cli, angular-material, css, html, tailwind-css, typescript
Language: TypeScript
Homepage:
Size: 215 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Reddit UI

## About

Reddit Front-end using the Angular framework.
backend repo: https://github.com/ahmedrafat-SW/spring-reddit-api

## Structure

The repository contains the following main components:

### 1. Folders and Files
- **src**: Contains the source code of the Angular application.
- **.vscode**: Visual Studio Code configuration files.
- **angular.json**: Angular CLI configuration file.
- **package.json**: Contains dependencies and scripts for the project.
- **tailwind.config.js**: Configuration file for Tailwind CSS.
- **tsconfig.json**: TypeScript configuration file.

## Features

- **Home Page**: Displays the home page of the Reddit clone.
- **Create Post**: Allows users to create a new post.
- **View Post**: View a specific post with comments.
- **Create Subreddit**: Allows users to create a new subreddit.
- **User Profile**: Displays the user's profile page.
- **Sign Up**: User registration page.
- **Login**: User login page.

## Screenshots

### Home Page
![Screenshot from 2023-11-10 01-20-11](https://github.com/ahmedrafat-SW/reddit-ui/assets/129176607/65bed692-4f21-4c31-8a72-fa73297e4709)

### Create Post
![Screenshot from 2023-11-28 10-24-52](https://github.com/ahmedrafat-SW/reddit-ui/assets/129176607/e0c4f754-e444-4f80-bb44-93ef54d0a513)
### View Post
![Screenshot from 2023-11-28 10-24-30](https://github.com/ahmedrafat-SW/reddit-ui/assets/129176607/618c8643-7aeb-4815-ba9d-9e69db54f1e6)

### Create Subreddit
![Screenshot from 2023-11-09 15-47-13](https://github.com/ahmedrafat-SW/reddit-ui/assets/129176607/a1cd6d98-f026-44ea-a32f-743a5463ca75)

### User Profile
![Screenshot from 2023-11-28 10-32-02](https://github.com/ahmedrafat-SW/reddit-ui/assets/129176607/dcb6a1fb-3668-4511-9083-b194900dc62e)

### Sign Up
![Screenshot from 2023-11-09 15-43-53](https://github.com/ahmedrafat-SW/reddit-ui/assets/129176607/6016a5d1-4055-43e7-9a15-2e073e466d43)

### Login
![Screenshot from 2023-11-09 15-18-41](https://github.com/ahmedrafat-SW/reddit-ui/assets/129176607/0aeb5d84-d246-45d7-aa14-2bc98f8aff0e)

## How to Use

1. **Clone the repository**:
```sh
git clone https://github.com/ahmedrafat-SW/reddit-ui.git
2. **Navigate to the project directory**:
```sh
cd reddit-ui
3. **Install the dependencies:**:
```sh
npm install
4. **Start the development server**:
```sh
ng serve