Courseopedia Fullstack Application

Here I have designed a fullstack application for CourseAPI using Angular and hosted it on Vercel. For backend, I have designed a production grade Courseopedia complete CRUD backend using Spring Boot, JPA, my own PostgreSQL Database instance and hosted it on Azure.

Live Link

Backend url - Deployed on Azure

Demo Recording

Backend Intro

Backend Code : https://github.com/SwarnadeepGhosh/Courseopedia

FrontEnd Intro

Frontend Code : https://github.com/SwarnadeepGhosh/CourseAPI-Spring-Starter

Features of UI

• CREATE or ADD a Topic / Course / Lesson
• READ all items (Topic / Course / Lesson)
• UPDATE a specific item (Topic / Course / Lesson)
• DELETE a specific item (Topic / Course / Lesson)

APIs I have built

Here we have 3 Controllers

• Topic APIs
• Course APIs - A topic may consists of many courses
• Lesson APIs - A course may consists of many lessons

Simple Example to understand

• Lets say Java as a Topic.
• Java has many courses like Java 8 , Java Collections and so on.
• Java 8 has many lessons like Lambda, Functional Interface etc.

Topics I used

Springboot Topics

• Spring Boot CRUD (Create, Read, Update, Delete) using Model, Service, Controller and Repository

• Spring Data JPA & Hibernate

• Hibernate associations and mappings

• Postgres Database

• Actuator Monitoring

• Logging by SLF4j, Caching by Hazlecast , Springfox Swagger

• Hosting in Heroku

• CORS Configuration

Angular Topics

• Structural Directives, Event Binding, Interpolation,

• Dependency Injection, Pipes, Angular Forms

• Observables and Http Error handling

• Routing, Route Parameters, Activated Route, Wildcard and Redirecting Routes

• Hosting in Vercel

Auto Generated Documentation

This project was generated with Angular CLI version 13.3.5.

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

• 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.

• Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

• Run ng test to execute the unit tests via Karma.

• Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

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