Manish Poduval ManishPoduval

Calendars in React

1. Install package

We will use this package to show an interactive calendar on our site

In your React code terminal run

Maps in React

1. Install package

We will use this package to show a map on our site

Lottie Animation

1. Install package

We will use this package to show lottie animations on our site

In your React code terminal run

Deployment with GitHub

To check how to deploy with Heroku-cli read here

create heroku account
- it's a cloud platform for hosting apps
- https://signup.heroku.com/
create application
provide a name (it will be the url https://app-name.herokuapp.com)

Using Charts in your Express app with ChartJS

You can find the sample working code here

Installation

1. Set up ChartJS

Using Maps in your Express app with Leaflet.js

You can find the sample working code here

Installation

1. Set up Leaflet css/js files

Full Stack Authentication

1. Setup Server

https://github.com/Ironhackers-OCT21/react-auth-server-starter

Fork this repo

Instructions

Our First Full Stack Project Setup

Ironlauncher installation

We will use Ironlauncher package that we used in module2 to set up our full-stack project code template. But this time we'll use to set up our client side code as well. (Note: create-react-app is inbuilt in this package)

	const router = require("express").Router();
	// Lazy me, I don't have time to convert superagent to axios
	const request = require('superagent');
	const UserModel = require('../models/User.model')

	function requestAccessToken(code) {
	return request.post('https://www.linkedin.com/oauth/v2/accessToken')
	.send('grant_type=authorization_code')
	.send(`redirect_uri=${process.env.LINKEDIN_REDIRECT_URI}`)
	.send(`client_id=${process.env.LINKEDIN_CLIENT_ID}`)

	import React, { Component } from 'react';
	import { LinkedIn } from 'react-linkedin-login-oauth2';
	import linkedin from 'react-linkedin-login-oauth2/assets/linkedin.png'

	class LinkedInButton extends Component {

	render() {
	const { onSuccess, onFailure } = this.props
	return (
	<div>