Posts

Showing posts with the label Full stack development

React Native Spring Boot: Full-stack CRUD example

Image
Here's a full-stack CRUD example using React Native as the front-end and Spring Boot 3 as the back-end. This example covers the setup and integration to manage tasks in a simple to-do list application. 1. Spring Boot Back-End Add Dependencies to pom.xml <dependencies> <dependency> <groupId> org.springframework.boot </groupId> <artifactId> spring-boot-starter-web </artifactId> </dependency> <dependency> <groupId> org.springframework.boot </groupId> <artifactId> spring-boot-starter-data-jpa </artifactId> </dependency> <dependency> <groupId> com.h2database </groupId> <artifactId> h2 </artifactId> <scope> runtime </scope> </dependency> </dependencies> Configure H2 Database in application.properties spring .datasource .url =jdbc: h2 :mem:tasksdb spring .datasourc...

Creating a Full Stack CRUD application with Django and Angular

Image
Creating a Full Stack CRUD (Create, Read, Update, Delete) application with Django for the backend and Angular for the frontend involves multiple steps. Below is a step-by-step guide to help you build a complete application. 1. Set Up the Backend (Django) 1.1 Install Django Start by setting up a virtual environment and installing Django. # Install virtualenv pip install virtualenv # Create a virtual environment virtualenv env # Activate the virtual environment source env /bin/activate # For Linux/Mac env \Scripts\activate # For Windows # Install Django and Django REST Framework pip install django djangorestframework corsheaders 1.2 Start a Django Project Create a new Django project and app. # Start a Django project django-admin startproject backend cd backend # Start an app python manage.py startapp api 1.3 Configure Django Project Add api , rest_framework , and corsheaders to your INSTALLED_APPS in backend/settings.py : INSTALLED_APPS = [ 'django .con...

Laravel and Angular: Creating a Full-Stack CRUD Application

Image
To build a full-stack application using Laravel (PHP backend) and Angular (frontend), we will implement a basic CRUD (Create, Read, Update, Delete) application. In this example, the backend will manage a list of users, and the frontend will interact with this backend via HTTP requests. Step 1: Backend - Laravel 1.1 Install Laravel First, create a new Laravel project using Composer. composer create - project --prefer-dist laravel/laravel laravel-angular-crud After installing, navigate to the project directory: cd laravel-angular-crud 1.2 Set Up Database Create a MySQL database (e.g., laravel_angular_crud ) and update the .env file in the root of your Laravel project to reflect the database connection. DB_CONNECTION =mysql DB_HOST = 127.0 . 0.1 DB_PORT = 3306 DB_DATABASE =laravel_angular_crud DB_USERNAME =root DB_PASSWORD = Run the migration to set up the default tables (optional, for user authentication): php artisan migrate 1.3 Create a Model and Migration for Users Now, we’ll...

Spring Boot 3 + Angular 15 + Material - Full Stack CRUD Application Example

Image
In this section we will develop a full-stack application that is a basic Student management application using Spring Boot 3, Angular 15, Material and PostgreSQL. You could download the source code from our GitHub repository, the download link is provided at the end of this article. After completing this tutorial what we will build?   We will build a full-stack web application that is a basic Student Management Application with CRUD features:  Create Student List Student Update Student  Delete Student Technologies used: Spring Boot 3+ Spring Data JPA PostgreSQL Java 17 Angular 15 Angular Material UI 1. Backend Development Creating a Spring boot web application First, open the Spring initializr: https://start.spring.io/   Then, Provide the Group and Artifact name. We have provided Group name com.knf.dev.demo and Artifact spring-boot3-postgresql-crud-app . Here I selected the Maven project - language Java 17 ,  Spring Boot 3.1.4  (latest) and add Sp...