Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/anchaldevbytes/atg-world-assignment-design

a social media design developed for the banao technologies internship assignment.
https://github.com/anchaldevbytes/atg-world-assignment-design

Last synced: 1 day ago
JSON representation

a social media design developed for the banao technologies internship assignment.

Host: GitHub
URL: https://github.com/anchaldevbytes/atg-world-assignment-design
Owner: AnchalDevBytes
Created: 2024-03-02T13:25:05.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-03-02T17:05:56.000Z (10 months ago)
Last Synced: 2024-11-10T17:21:37.552Z (about 2 months ago)
Language: JavaScript
Homepage: https://atg-world-banao.netlify.app/
Size: 4.06 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# ATG-World
### Banao Technologies Pvt Ltd - assignment

Welcome to ATG-World, a social media app developed by Anchal Raj for the Internshala assignment. This app features the Figman design for a social media platform, focusing on the user interface (UI) of various functionalities.

## Features

- **User Authentication UI**: User-friendly and intuitive login and signup screens.
- **News Feed UI**: Stylish and visually appealing feed layout for displaying posts.
- **Create Account/Sign In UI**: A sleek interface for creating and sharing posts, including options for text and image uploads.

## Home Page Screenshot
![Home](/src/images/home.png)

## Technologies Used

- **React**: A JavaScript library for building user interfaces, used for implementing the UI components.
- **Tailwind CSS**: A utility-first CSS framework, used for styling the UI components efficiently.
- **Figma**: A collaborative interface design tool, used for creating the UI designs.

## Getting Started

1. Clone the repository:

```bash
git clone https://github.com/anchalraj31082004/atg-world-assignment-design.git
```
2. Go to the project directory and open with VS-Code
```bash
cd atg-world-assignment-design
code .
```

3. Install Dependencies

```bash
npm install
```

4. Run the Developement Server

```bash
npm run dev
```

5. Open http://localhost:5173 in your browser to view the application.

## Folder Structure

The project structure is organized to facilitate the implementation of the Figma design into a React app. It include folders for components, assets in public folder, and pages, depending on your project setup.

## Other Screenshots

### Articles
![Articles](/src/images/articles.png)

### Signup
![Signup](/src/images/signup.png)

## Deployment

It is deployed on the `Netlify` for the preview. You can view it [here](https://atg-world-banao.netlify.app/)

## Acknowledgements

Special thanks to `Internshala` and `Banao Technologies` for providing the opportunity to work on this assignment and showcase my skills in UI design using Figma, React, and Tailwind CSS.

## Contact

For any inquiries or feedback, feel free to contact me at [my email]([email protected]) and [twitter](https://twitter.com/AnchalTwt).

Thank you for checking out ATG-World's UI design! 🚀