X-Meme (Angular Front End Project)

Author

• Name - Subham Kumar Das
• Check out Github Repository to know more

Generator

This project was generated with Angular CLI version 11.0.7.

About Project

• This Project is Angular Frontend part of X-Meme designed during Crio Winter of Doing (CWodD) Challenge, 2021.

• Check out the deployed site in Netlify.

• The API for this project is deployed in Heroku.

• Check out Github Repository for backend Here

Angular Components

1. HomeComponent - Component responsible for rendering content of home page

2. EditMemeComponent - Component Responsible for editing payload of meme

3. MemeListComponent - Component resposible for rendering 100 most recently uploaded Meme

4. MemeComponent - Component resposible for rendering payload of Each meme. Each meme contains name of uploader, caption and Image itself.

5. UploadMemeComponent - Component resposible for uploading new meme to backed api repository

6. UploadReviewComponent - Component responsible for taking input of user review and calling necessary services to remote API

7. ReviewListComponent - Component renders 20 most recently uploaded reviews.

8. PageNotFoundComponent - Component which will be rendered if 404-page not found error occurs.

Models

Models are present inside model directory

1. IMeme - Model which represents payload of each meme. Namely they are name of uploader, caption of meme and url of image used in meme. Also, a numerical ID is also present in IMeme which is autogenerated by server.

2. IUploadResponse - Response after upload of new meme is succesful

3. IUpdateResponse - Response after update of meme payload is succesful.

4. IReview - Model encapsulating review payload.

Services

1. MemeService - All Necessary HTTP Services related to X-Meme are encapsulated.

2. ReviewServer - All Necarry HTTP Services related to user's review are encapsulated

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.