https://github.com/steve-237/snapface

Snapface is a social networking platform built as part of an OpenClassrooms project. It aims to provide users with a smooth and engaging experience for sharing photos, videos, and staying connected with friends and communities.
https://github.com/steve-237/snapface

angular scss typescript

Last synced: 2 months ago
JSON representation

Snapface is a social networking platform built as part of an OpenClassrooms project. It aims to provide users with a smooth and engaging experience for sharing photos, videos, and staying connected with friends and communities.

• Host: GitHub
• URL: https://github.com/steve-237/snapface
• Owner: steve-237
• Created: 2024-09-15T20:23:25.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-05T15:40:57.000Z (over 1 year ago)
• Last Synced: 2025-04-05T02:23:11.710Z (about 1 year ago)
• Topics: angular, scss, typescript
• Language: TypeScript
• Homepage: https://steve-237.github.io/snapface/
• Size: 261 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 📸 SnapFace

![image](https://github.com/user-attachments/assets/dbb3f12e-b31b-41fa-b6dc-851f7fcce8d5)

SnapFace is an Angular project inspired by OpenClassrooms to help developers learn the fundamentals of Angular. The application displays a list of images with a "Snap" button that allows users to like the images.

## 🚀 Features

- 🖼️ Display a list of face posts with descriptions  

- 👍 "Snap" a post to increase its score  

- 🔍 View detailed information about each post  

- 🔄 Angular routing for smooth navigation  

- ⚡ Services to manage application state  

## 🛠️ Technologies Used

- 🅰️ **Angular** (version 18)  

- 🟦 **TypeScript**  

- 🔄 **RxJS**  

- 🎨 **SCSS/CSS** for styling  

- 🛠️ **Angular CLI** for project management  

## 📥 Installation

Follow these steps to install and run the project locally:

1. 📂 Clone the repository:  

   ```sh

   git clone https://github.com/yourusername/snapface.git

   cd snapface

   npm install

   ng serve

   ```

2. 📁 Project Structure  

```

SnapFace/

├── src/

│   ├── app/

│   │   ├── components/   # 🎭 Reusable components

│   │   ├── services/     # 🔧 Application services

│   │   ├── models/       # 📝 Data models

│   │   ├── app.module.ts # 📦 Main module

│   │   ├── app-routing.module.ts # 🛤️ Routing configuration

│   ├── assets/           # 🖼️ Static assets

│   ├── styles/           # 🎨 Global styles

├── angular.json          # ⚙️ Angular configuration

├── package.json          # 📜 Dependencies and scripts

```

3. 🖱️ Usage  

- 👍 Click the "Snap" button to like a post.  

- 🔍 Click on a post to view details.  

- 🚀 Use the Angular Router to navigate between pages.