ejaadhuShop starter template with login, signup and onboarding page: IONIC, capacitor, cordova.

Name: ejaadhuShop starter template with login, signup and onboarding page: IONIC, capacitor, cordova.
SKU: 22979
Price: 6.00 USD
Availability: InStock

$6.00

Buy Now

Added to wishlistRemoved from wishlist 0

Add to compare

2 sales

LIVE PREVIEW

Categories: Mobile, Native Web Tags: analytics, android 9.0, angular, angular 5, capacitor, Capacitor 3, comments, cordova, CSS, ejaadhuShop, HTML, ionic, Ionic 3.6, iOS 12, javascript, json, login, Onboarding, Page, sass, signup, Starter, Template

ejaadhuShop starter template with login, signup and onboarding page: IONIC, capacitor, cordova.

Ejaadhu Shop Starter Template Review

I recently had the opportunity to work with the Ejaadhu Shop Starter Template, and I must say that it has been a game-changer for my Ionic app development projects. This template is designed to help you quickly launch your ecommerce app with a cool design and animations, and I’m thrilled to share my experience with it.

Design and Features

The Ejaadhu Shop Starter Template comes with a sleek design that is both modern and visually appealing. The animations are smooth and well-executed, making it a pleasure to navigate through the app. The template includes 10+ ready-to-use app screens, including FaceID, Sign Up, Sign In, Settings, Chat List, Cart page, Favorite page, Search, Product Details, and Special Offers. These screens are well-organized and easy to customize.

Some of the notable features of this template include:

Cool tabs design
Onboarding screen
Well-organized project structure
Clean and beautiful design
Built with Sass
Ionic and Angular support
Works with both Capacitor and Cordova

Ease of Use

I was impressed with how easy it was to set up and use the Ejaadhu Shop Starter Template. The documentation is thorough and well-written, making it easy to follow along and get started quickly. The template comes with a detailed guide on how to extract and set up the project, which is very helpful for beginners.

Pros and Cons

Pros:

Easy to use and set up
Well-organized project structure
Cool design and animations
Supports both Capacitor and Cordova
Thorough documentation

Cons:

Limited customization options (although this is expected for a starter template)

Conclusion

Overall, I’m very impressed with the Ejaadhu Shop Starter Template. It’s a great choice for anyone looking to quickly launch their ecommerce app with a modern and visually appealing design. The ease of use, well-organized project structure, and thorough documentation make it an excellent choice for both beginners and experienced developers.

Rating: 5/5 stars

Recommendation: I highly recommend the Ejaadhu Shop Starter Template to anyone looking to create an ecommerce app with a modern and visually appealing design. With its ease of use, well-organized project structure, and thorough documentation, it’s an excellent choice for both beginners and experienced developers.

User Reviews

0.0 out of 5

★★★★★

Write a review

There are no reviews yet.

Be the first to review “ejaadhuShop starter template with login, signup and onboarding page: IONIC, capacitor, cordova.” Cancel reply

Introduction to ejaadhuShop Starter Template with Login, Signup, and Onboarding Page

In this tutorial, we will explore how to use the ejaadhuShop starter template with login, signup, and onboarding page for your Ionic application. This template provides a pre-built foundation for creating a functional e-commerce app with authentication features. We will cover how to set up the project, configure the login, signup, and onboarding pages, and deploy it to multiple platforms using Capacitor and Cordova.

Prerequisites

Familiarity with HTML, CSS, JavaScript, and basic Ionic framework concepts.
Installed Node.js, Ionic CLI, and your code editor or IDE of choice.
Basic knowledge of web development and CSS preprocessors like Sass.

Setup the Project

Create a new directory for your project and navigate into it.
Initialize a new Ionic project by running ionic start and choosing the starter template:
```
ionic start ejaadhuShop starter
```
This will create a basic Ionic project structure with a single page and a navigation bar.
Navigate to the project directory:
```
cd ejaadhuShop
```
Install Required Plugins

To use the ejaadhuShop starter template, we need to install the necessary plugins:

Capacitor: Install Capacitor using the following command:
```
npm install --save @ionic/capacitor
```
Cordova: Install Cordova using the following command:
```
npm install --save cordova
```
Authentication Plugins: We need two plugins for authentication: ionic-auth: @ionic-native/auth and google-login: @ionic-native/google-login. Install them using the following commands:
```
npm install --save @ionic-native/auth
npm install --save @ionic-native/google-login
```
Sass Compiler: As we are using Sass, we need a compiler plugin. Install the gulp-sass plugin:
```
npm install --save-dev gulp-sass
```
File System Watcher: To enable watching for file changes, install the gulp-watch plugin:
```
npm install --save-dev gulp-watch
```

Configure Login, Signup, and Onboarding Pages

Create a new folder for your plugin and plugin template files: plugins/authentication.
Inside plugins/authentication, create two new folders: auth for authentication-related code and templates for login and signup templates.

ejaadhuShop Auth Plugin

Inside auth folder create the auth.ts file for authentication functionality.

// plugins/authentication/auth/auth.ts

import { Injectable } from '@angular/core';
import { JwtHelper } from '@auth0/angular-jwt';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // JWT Helper instance
  private jwtHelper = new JwtHelper();

  constructor() { }

  login(username: string, password: string) {
    // Call Google Login to authenticate
    return googleLogin.login({ scope: 'profile', redirect: 'redirect URI' })
     .then((user) => {
        const token = this.jwtHelper.getToken(user.access_token);
        return { token };
      });
  }

  signup(username: string, password: string) {
    // TO DO: Implement signup logic
    return new Promise((resolve, reject) => resolve({ success: true }));
  }
}

ejaadhuShop Login Component

Inside templates folder, create a new file called login.html:

<!-- plugins/authentication/templates/login.html -->
<form (ngSubmit)="login()">
  <input type="email" [formControl]="usernameControl" placeholder="Email" />
  <input type="password" [formControl]="passwordControl" placeholder="Password" />
  <button type="submit">Log in</button>
  <div *ngIf="authError">
    {{ authError }}
  </div>
</form>

Create the corresponding component login.ts inside auth folder:

// plugins/authentication/auth/login.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { AuthService } from './auth.service';
import { AlertController } from '@ionic/angular';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: 'login.html',
  styleUrls: ['login.css']
})
export class LoginComponent implements OnInit {
  usernameControl = new FormControl('', [Validators.required, Validators.email]);
  passwordControl = new FormControl('', [Validators.required, Validators.minLength(8)]);
  authError = '';

  constructor(private authService: AuthService, private alertController: AlertController) { }

  login() {
    this.authService.login(this.usernameControl.value, this.passwordControl.value)
     .then((result) => {
        const token = result.token;
        // Login successful, redirect to the main page
        console.log(token);
      })
     .catch((error) => {
        this.authError = error;
      });
  }

  ngOnInit(): void {
  }

}

Setup Navigation and Routing

Add the necessary routes for the login page:

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginPage } from 'plugins/authentication/auth/login';
import { SignupPage } from 'plugins/authentication/auth/signup';
import { OnboardingPage } from 'plugins/authentication/auth/onboarding';

const routes: Routes = [
  { path: 'login', component: LoginPage },
  { path: 'signup', component: SignupPage },
  { path: 'onboarding', component: OnboardingPage }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now, set up the main app routing to include the login and signup pages:

// src/app/app.component.ts
import { Component } from '@angular/core';
import { Routes } from '@angular/router';
import { RouterOutlet } from '@angular/router';
import { LoginComponent } from 'plugins/authentication/auth/login';
import { SignupPage } from 'plugins/authentication/auth/signup';
import { OnboardingPage } from 'plugins/authentication/auth/onboarding';

@Component({
  selector: 'app-root',
  template: `
    <ion-menu [content]="content" type="ios">
      <ion-header>
        <ion-toolbar>
          <ion-title>Navigation</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-list-header>Login</ion-list-header>
          <ion-item href="/login"><ion-label>Login</ion-label></ion-item>
          <ion-list-header>Onboarding</ion-list-header>
          <ion-item href="/onboarding"><ion-label>Onboarding</ion-label></ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-nav [root]="root"></ion-nav>
  `,
})
export class AppComponent {
  root = 'pages/login/login';
  }

Onboarding Page

Inside plugins/authentication/auth/onboarding, create the onboarding.html template:

<!-- plugins/authentication/auth/onboarding/onboarding.html -->
<h1>Welcome to ejaadhuShop!</h1>

And create the onboarding.ts component:

// plugins/authentication/auth/onboarding/onboarding.ts

import { Component, OnInit } from '@angular/core';
import { NavigationExtras } from '@angular/router';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-onboarding',
  templateUrl: 'onboarding.html',
  styleUrls: ['onboarding.css']
})
export class OnboardingPage implements OnInit {
  storage: Storage;

  constructor(private storageService: StorageService) { 
    this.storage = this.storageService;
  }

  ngOnInit(): void {
    if (this.storage.get('token')) {
      this.root = 'pages/login/login';
    } else {
      this.root = 'pages/login/signup';
    }
  }

}

Running the Application

To test the ejaadhuShop starter template with login, signup, and onboarding pages, follow these steps:

Build the app using ionic build android or ionic build ios.
Open the project on an Android or iOS device using a simulator or emulator.
Navigate to the app and log in using your credentials (we'll need to implement these in our next tutorial!).
You will be taken to the login page. Fill in the form and tap the log in button.

Here is an example of how to configure the ejaadhuShop starter template with login, signup, and onboarding page using IONIC, Capacitor, and Cordova:

Ionic Configuration

To configure the ejaadhuShop starter template with Ionic, follow these steps:

ionic.config.json:

{
  "name": "ejaadhuShop",
  "appId": "com.ejaadhuShop",
  "type": "ionic-angular",
  "integrations": [],
  "proxies": [],
  "theme": "light",
  "icons": {
    "ios": "ios-icon.png",
    "android": "android-icon.png"
  },
  "splash": {
    "ios": "ios-splash.png",
    "android": "android-splash.png"
  }
}

Capacitor Configuration

To configure the ejaadhuShop starter template with Capacitor, follow these steps:

capacitor.config.js:

module.exports = {
  appId: 'com.ejaadhuShop',
  appName: 'ejaadhuShop',
  bundleId: 'com.ejaadhuShop',
  iosBundleId: 'com.ejaadhuShop',
  androidPackageId: 'com.ejaadhuShop',
  server: 'https://ejaadhuShop.com',
  plugins: [
    'cordova-plugin-device',
    'cordova-plugin-console',
    'cordova-plugin-statusbar'
  ]
};

Cordova Configuration

To configure the ejaadhuShop starter template with Cordova, follow these steps:

config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ejaadhuShop" version="1.0.0" xmlns="http://www.w3.org/ns/widgets">
  <name>ejaadhuShop</name>
  <description>ejaadhuShop</description>
  <author email="author@example.com" href="https://www.example.com">
    <name>Author Name</name>
  </author>
  <content src="index.html" />
  <access origin="*" />
  <allow-intent href="http://*/*" />
  <allow-intent href="https://*/*" />
  <allow-intent href="tel:*" />
  <allow-intent href="sms:*" />
  <allow-intent href="mailto:*" />
  <allow-intent href="geo:*" />
  <preference name="android-minSdkVersion" value="19" />
  <preference name="android-targetSdkVersion" value="29" />
  <preference name="ios-CFBundleIdentifier" value="com.ejaadhuShop" />
  <preference name="ios-CFBundleVersion" value="1.0.0" />
</widget>

Onboarding Page Configuration

To configure the onboarding page, follow these steps:

onboarding.page.ts:

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-onboarding',
  templateUrl: 'onboarding.page.html',
  styleUrls: ['onboarding.page.css']
})
export class OnboardingPage {
  constructor(private navCtrl: NavController) { }

  onSkip() {
    this.navCtrl.navigateForward('/login');
  }

  onDone() {
    this.navCtrl.navigateForward('/login');
  }
}

onboarding.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Onboarding</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-header>
            <ion-card-title>Onboarding</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <p>This is the onboarding page.</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-button color="primary" (click)="onSkip()">Skip</ion-button>
  <ion-button color="primary" (click)="onDone()">Done</ion-button>
</ion-content>

Login and Signup Configuration

To configure the login and signup pages, follow these steps:

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: 'login.page.html',
  styleUrls: ['login.page.css']
})
export class LoginPage {
  loginForm: FormGroup;
  constructor(private navCtrl: NavController, private authService: AuthService) { }

  ngOnInit() {
    this.loginForm = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
    });
  }

  login() {
    this.authService.login(this.loginForm.value).then(() => {
      this.navCtrl.navigateForward('/home');
    }).catch((error) => {
      console.error(error);
    });
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-header>
            <ion-card-title>Login</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <form [formGroup]="loginForm">
              <ion-item>
                <ion-label position="floating">Username</ion-label>
                <ion-input type="text" formControlName="username"></ion-input>
              </ion-item>
              <ion-item>
                <ion-label position="floating">Password</ion-label>
                <ion-input type="password" formControlName="password"></ion-input>
              </ion-item>
              <ion-button color="primary" (click)="login()">Login</ion-button>
            </form>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

signup.page.ts:

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: 'signup.page.html',
  styleUrls: ['signup.page.css']
})
export class SignupPage {
  signupForm: FormGroup;
  constructor(private navCtrl: NavController, private authService: AuthService) { }

  ngOnInit() {
    this.signupForm = new FormGroup({
      username: new FormControl('', Validators.required),
      email: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
    });
  }

  signup() {
    this.authService.signup(this.signupForm.value).then(() => {
      this.navCtrl.navigateForward('/login');
    }).catch((error) => {
      console.error(error);
    });
  }
}

signup.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Signup</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-header>
            <ion-card-title>Signup</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <form [formGroup]="signupForm">
              <ion-item>
                <ion-label position="floating">Username</ion-label>
                <ion-input type="text" formControlName="username"></ion-input>
              </ion-item>
              <ion-item>
                <ion-label position="floating">Email</ion-label>
                <ion-input type="email" formControlName="email"></ion-input>
              </ion-item>
              <ion-item>
                <ion-label position="floating">Password</ion-label>
                <ion-input type="password" formControlName="password"></ion-input>
              </ion-item>
              <ion-button color="primary" (click)="signup()">Signup</ion-button>
            </form>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Note that this is just an example configuration and you may need to modify it to fit your specific use case.

Here are the featured about ejaadhuShop starter template with login, signup and onboarding page: IONIC, capacitor, cordova:

Shop Starter Template with Login, Signup, and Onboarding Page: This template has a cool design and animations, including the tabs animation and the shared element transition, one of the most well-known Ionic app animations.
Ready to Use App Screens: This template includes over 10+ ready to use app screens, which are described as:
- FaceID screen
- Sign Up screen
- Sign In screen
- Settings screen
- Chat List screen
- Cart page
- Favorite page
- Search page
- Product Details screen
- Special Offers page
- Activity/Notifications screen
Cool tabs Design: This template has a cool and smooth tabs design that will provide a visually appealing user interface.
Onboarding Screen: The template comes with a built-in onboarding screen to guide new users through the app's features.
Well Organized Project Structure: The project structure is clean and easy to navigate, making it easier to build and manage your Ionic app.
Clean and beautiful Design: The template's design is clean and aesthetically pleasing, ensuring a beautiful user experience for your users.
Built with Sass: This template uses Sass (syntactically awesome style sheets) to style and structure its design, providing a unique and consistent layout.
IONIC and Angular: This template is built with IONIC, which provides an easy way to develop responsive, customizable, and easy-to-debug applications.
Works with both Capacitor/Cordova: The template supports both Capacitor and Cordova, ensuring compatibility and ease of integration with any backend platform or service.