DEV Community: Simranjot

Building a restaurant iOS App

Simranjot — Wed, 29 Dec 2021 11:36:34 +0000

We are building a simple food ordering iOS Application with Swift 5! It would look something like this after we build it:

Let's quickly go through a rough architecture of the application. We'll have two ViewControllers in our application:

RestaurantListingsViewController

This will be the home viewController of the app. This is where the user will land after opening the app. It will fetch the restaurants data from our backend and display it in a simple TableViewController. When the user will click on any one of them, we'll take him to the menu screen of the restaurant.
RestaurantMenuViewController
After clicking on any one of the restaurants from our home scene, this viewController will fetch the menu items for it, let the user add them to his cart and place an order!

We'll be using Alamofire networking library to help us communicate with our Backend easily and help us focus on building the actual app.

Step 1: Create & Setup a new Project

Open Xcode and click on Create a new Xcode Project.

Select the App option
Enter the name: Restaurant App
We'll be using Swift as our language and Storyboard as our Interface
Click Next and create your project!

To add Alamofire, we'll be using Swift Package Manager. Xcode comes with built-in support for it and we'll not have to use external package managers like Cocoapods or Carthage. Click on File → Add Packages...

Enter the following Package URLs in the search bar and add: Alamofire & AlamofireImage

https://github.com/Alamofire/AlamofireImage.git
https://github.com/Alamofire/Alamofire.git

Our project is set and ready to be built, let's dive in 🏃‍♂️

Step 2: Setup Data Modals and Helpers

Before creating any of our views and controllers, we'll set up our data modals that will hold the data that will be used inside our viewControllers. We'll create three modal files:

Restaurant.swift

This will a struct confirming to Codable protocol that will hold the data for our restaurants. When we'll fetch all the restaurants, the data coming in from the backend will be decoded into this struct.

//
//  Restaurant.swift
//  Restaurant App
//

import Foundation

struct Restaurants: Codable {
    let restaurants: [Restaurant]

    enum CodingKeys: String, CodingKey {
        case restaurants = "data"
    }
}

struct Restaurant: Codable {
    var id, name, description: String
    let brandImage: BrandImage?

    enum CodingKeys: String, CodingKey {
        case id = "_id"
        case name, description, brandImage
    }

    init() {

        id = ""
        name = ""
        description = ""
        brandImage = BrandImage()
    }

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        id = try container.decode(String.self, forKey: .id)
        name = try container.decode(String.self, forKey: .name)
        description = try container.decode(String.self, forKey: .description)
        brandImage = try container.decodeIfPresent(BrandImage.self, forKey: .brandImage)
    }
}

struct BrandImage: Codable {
    let url, alt, name: String?

    enum CodingKeys: String, CodingKey {
        case url, alt, name
    }

    init() {
        url = ""
        alt = ""
        name = ""
    }

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        url = try container.decodeIfPresent(String.self, forKey: .url)
        alt = try container.decodeIfPresent(String.self, forKey: .alt)
        name = try container.decodeIfPresent(String.self, forKey: .name)
    }
}

Menu.swift

This will a struct confirming to Codable protocol that will hold the data for our menu items. When we'll fetch the menu items for any particular restaurant, the data coming in from the backend will be decoded into this struct.

//
//  Menu.swift
//  Restaurant App
//

import Foundation

struct Menus: Codable {
    let menus: [Menu]

    enum CodingKeys: String, CodingKey {
        case menus = "data"
    }
}

struct Menu: Codable {
    var id, itemName, description, price: String
    let itemImage: ItemImage?

    enum CodingKeys: String, CodingKey {
        case id = "_id"
        case itemName, description, itemImage, price
    }

    init() {
        itemName = ""
        description = ""
        price = ""
        id = ""
        itemImage = ItemImage()
    }

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        id = try container.decode(String.self, forKey: .id)
        itemName = try container.decode(String.self, forKey: .itemName)
        description = try container.decode(String.self, forKey: .description)
        itemImage = try container.decodeIfPresent(ItemImage.self, forKey: .itemImage)
        price = try container.decode(String.self, forKey: .price)
    }
}

struct ItemImage: Codable {
    let url, alt, name: String?

    enum CodingKeys: String, CodingKey {
        case url, alt, name
    }

    init() {
        url = ""
        alt = ""
        name = ""
    }

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        url = try container.decodeIfPresent(String.self, forKey: .url)
        alt = try container.decodeIfPresent(String.self, forKey: .alt)
        name = try container.decodeIfPresent(String.self, forKey: .name)
    }
}

Order.swift

This will a struct confirming to Codable protocol that will hold the details of the order the user is placing. We'll send this data to our backend when the user places his confirmed order.

//
//  Order.swift
//  Restaurant App

import Foundation

struct Order: Codable {
    var restaurant: String
    var totalAmount: String
    var orderItems: [OrderItems]

    init() {
        restaurant = ""
        totalAmount = ""
        orderItems = []
    }
}

struct OrderItems: Codable {
    var item: String
    var quantity: String
}

Constants & Extensions

UIViewController+Extensions.swift

We'll be using a helper function to display alerts. We'll place it the UIViewController+Extensions.swift file.

//
//  UIViewController+Extensions.swift
//  Restaurant App
//

import UIKit

extension UIViewController {

  func presentAlert(withTitle title: String, message : String) {
    let alertController = UIAlertController(title: title, message: message, preferredStyle: .alert)
    let OKAction = UIAlertAction(title: "OK", style: .default) { action in
        print("You've pressed OK Button")
    }
    alertController.addAction(OKAction)
    self.present(alertController, animated: true, completion: nil)
  }
}

Constants.swift

This will hold StoryboardIdentifiers for our ViewControllers, ReuseIdentifiers for our UITableView Cells and some helper enums!

//
//  Constants.swift
//  Restaurant App
//

import Foundation

struct StoryBoardID {
    static let RestaurantListingsViewController = "RestaurantListingsViewController"
    static let RestaurantMenuViewController = "RestaurantMenuViewController"
}

struct CellIdentifiers {
    static let RestaurantTableViewCell = "RestaurantTableViewCell"
    static let RestaurantMenuTableViewCell = "RestaurantMenuTableViewCell"
}

enum NetworkState {
    case success
    case loading
    case failure
}

Our folder structure would look something like this after the setup:

Step 3: Setup Restaurant Listings

Create a two new Cocoa Touch Classes:

RestaurantListingsViewController of type UIViewController to hold our UI
RestaurantTableViewCell of type UITableViewCell to customise our TableCell

Head over to the Main.storyboard file where we'll create our view of our controller.

Assign RestaurantListingsViewController class we just created to a new UIViewController
Embed our RestaurantListingsViewController in an UINavigationController
Configure the UI
- Loading State UI (When the API call is in progress)
- Retry State UI (When the API call fails)
- RestaurantsTableView (When the API call succeeds and data is displayed)
- Create a prototype cell and assign it the RestaurantTableViewCell class

You can see the view setup on the interface in the sample project repository here

Head over to RestaurantListingsViewController and add the following code. We are going to:

Create the outlets and connect them with our interface
Add some variables to hold data for us

//
//  RestaurantListingsViewController.swift
//  Restaurant-App
//

import UIKit
import Alamofire

class RestaurantListingsViewController: UIViewController {

    var restaurants: [Restaurant] = [] // It'll have the array of all the restaurant items coming from the backend
    var fetchState: NetworkState = .loading // It'll have the latest network state of our view controller to control what to show

    @IBOutlet weak var retryButton: UIButton!
    @IBOutlet weak var retryStackView: UIStackView!
    @IBOutlet weak var loadingStackView: UIStackView!
    @IBOutlet weak var restaurantsTableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        title = "Restaurants"

        setupRetryButtton()
        setupTableView()

        updateViewState()
        fetchRestaurants()
    }
}

Add the following extensions below your class to setup our viewController:

// MARK: View Setup

extension RestaurantListingsViewController {

        // Sets up the retry button
    fileprivate func setupRetryButtton() {
        retryButton.layer.cornerRadius = 8
        retryButton.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20)
    }

        // Sets up the tableView
    fileprivate func setupTableView() {
        restaurantsTableView.backgroundColor = .clear
        restaurantsTableView.tableFooterView = UIView()
    }

        // Helps to show the correct UI state
    fileprivate func updateViewState() {
        switch fetchState {
        case .success:
            retryStackView.isHidden = true
            loadingStackView.isHidden = true
            restaurantsTableView.isHidden = false
            break;

        case .loading:
            retryStackView.isHidden = true
            loadingStackView.isHidden = false
            restaurantsTableView.isHidden = true

        case .failure:
            retryStackView.isHidden = false
            restaurantsTableView.isHidden = true
            loadingStackView.isHidden = true
            break

        }
    }
}

// MARK: Action Helpers

extension RestaurantListingsViewController {

        // Triggers the Restaurant Fetching API call again 
    @IBAction func retryTapped(_ sender: Any) {
        fetchRestaurants()
        updateViewState()
    }

        // Updates the TableView after the API Call
    fileprivate func postRestaurantFetchActions() {
        switch fetchState {
        case .success:
            restaurantsTableView.reloadSections(IndexSet(integer: 0), with: .bottom)
            break
        default:
            break
        }
        updateViewState()
    }

        // Shows the menu items for the selected restaurant
    fileprivate func pushToRestaurantMenuVC(for restaurant: Restaurant) {
        // Push to Menu Items
    }
}

// MARK: TableView Delegates

extension RestaurantListingsViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {        
        return restaurants.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: CellIdentifiers.RestaurantTableViewCell, for: indexPath) as! RestaurantTableViewCell
        cell.configureCell(for: restaurants[indexPath.row])
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        pushToRestaurantMenuVC(for: restaurants[indexPath.row])
    }
}

// MARK: Networking

extension RestaurantListingsViewController {

    fileprivate func fetchRestaurants() {
        fetchState = .loading
        AF.request("YOUR API URL")
          .validate()
          .responseDecodable(of: Restaurants.self) { [weak self] (response) in
            guard let availableRestaurants = response.value else { return }
              self?.restaurants = availableRestaurants.restaurants
              self?.fetchState = (response.error != nil) ? .failure : .success
              DispatchQueue.main.async {
                  self?.postRestaurantFetchActions()
              }
          }
    }
}

Head over to RestaurantTableViewCell and add the following code to setup our custom cell:

//
//  RestaurantTableViewCell.swift
//  Restaurant App
//

import UIKit
import Alamofire
import AlamofireImage

class RestaurantTableViewCell: UITableViewCell {

    @IBOutlet weak var brandImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        brandImageView.contentMode = .scaleToFill
    }

    func configureCell(for restaurant: Restaurant) {
        titleLabel.text = restaurant.name
        descriptionLabel.text = restaurant.description

        guard let image = restaurant.brandImage else { return }
        guard let urlString = image.url else { return }
        let request = URLRequest(url: URL(string: urlString)!)
        AF.request(request).responseImage { response in
            if case .success(let image) = response.result {
                self.brandImageView.image = image
                }
        }
    }
}

Step 4: Setup Backend

Let's head to Canonic and find the Restaurant App sample project from the Marketplace. You can either:

Use this sample project to and continue, or
Clone it and Deploy 🚀 . This will then use your data from your own project.

Head on to the Docs and copy the /restaurants endpoint of the Restaurant Table. This is the Get API that will fetch us the data from the database.

Replace the URL you got in our networking code (fetchRestaurants function) in our RestaurantListingsViewController file, run the app and it will show you this:

Step 4: Setup Restaurant Menu View

We'll follow a very similar pattern with this viewController also. Create a two new Cocoa Touch Classes:

RestaurantMenuViewController ****of type UIViewController to hold our UI
RestaurantMenuTableViewCell of type UITableViewCell to customise our TableCell

Our folder structure will be looking something like this:

Head over to the Main.storyboard file where we'll create our view of our controller.

Assign RestaurantMenuViewController class we just created to a new UIViewController
Configure the UI
- Loading State UI (When the API call is in progress)
- Retry State UI (When the API call fails)
- Place Order Button
- RestaurantsTableView (When the API call succeeds and data is displayed)
- Create a prototype cell and assign it the RestaurantMenuTableViewCell class

You can see the view setup on the interface in the sample project repository here

Head over to RestaurantMenuViewController and add the following code. We are going to:

Create the outlets and connect them with our interface
Add some variables to hold data for us

//
//  RestaurantMenuViewController.swift
//  Restaurant App
//

import UIKit
import Alamofire

// Protocol that our custom cell will confoirm to. It'll be triggered everytime the quantity changes of any of the items
protocol OrderUpdates {
    func updateOrder( menuItem: inout Menu, quantity: Int)
}

class RestaurantMenuViewController: UIViewController {

    var restaurant: Restaurant!
    var menuItems: [Menu] = []
    var orderSummary = Order()
    var fetchState: NetworkState = .loading


    @IBOutlet weak var retryButton: UIButton!
    @IBOutlet weak var retryStackView: UIStackView!
    @IBOutlet weak var loadingStackView: UIStackView!
    @IBOutlet weak var menuTableView: UITableView!
    @IBOutlet weak var placeOrderButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        title = restaurant.name
        orderSummary.restaurant = restaurant.id

        setupRetryButtton()
        setupTableView()

        updateViewState()
        updatePlaceOrderButton()
        fetchMenu()
    }
}

Add the following extensions below your class to setup our viewController:

// MARK: View Setup

extension RestaurantMenuViewController {

        // Sets up the retry button
    fileprivate func setupRetryButtton() {
        retryButton.layer.cornerRadius = 8
        retryButton.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20)
    }

// Sets up the tableView
    fileprivate func setupTableView() {
        menuTableView.backgroundColor = .clear
        menuTableView.tableFooterView = UIView()
        menuTableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 100, right: 0)
    }

// Helps to show the correct UI state
    fileprivate func updateViewState() {
        switch fetchState {
        case .success:
            retryStackView.isHidden = true
            loadingStackView.isHidden = true
            menuTableView.isHidden = false
            break;

        case .loading:
            retryStackView.isHidden = true
            loadingStackView.isHidden = false
            menuTableView.isHidden = true
            break;

        case .failure:
            retryStackView.isHidden = false
            menuTableView.isHidden = true
            loadingStackView.isHidden = true
            break;

        }
    }

}

// MARK: Action Helpers

extension RestaurantMenuViewController {

        // Triggers the Menu Fetching API call again
    @IBAction func retryTapped(_ sender: Any) {
        fetchMenu()
        updateViewState()
    }

        // Configures the data and makes and API to the backend to place the order
    @IBAction func placeOrderClicked(_ sender: Any) {
        let jsonData = try! JSONEncoder().encode(orderSummary)
        let json = try? JSONSerialization.jsonObject(with: jsonData, options: [.topLevelDictionaryAssumed]) as? [String: Any]
        let parameters = ["input": json]
        placeOrder(parameters: parameters as [String : Any])
    }

        // Updated the Place Order Button with correct amount after the user adds or removes any items
    fileprivate func updatePlaceOrderButton() {
        let amount = getTotalAmount()
        placeOrderButton.setTitle("Place Order: $\(amount)", for: .normal)
        placeOrderButton.setTitle("Place Order", for: .disabled)
        placeOrderButton.isHidden = !(amount > 0.0)
    }

        // Updates the TableView after the API Call
    fileprivate func postMenuFetchActions() {
        switch fetchState {
        case .success:
            menuTableView.reloadSections(IndexSet(integer: 0), with: .bottom)
            break
        default:
            break
        }
        updateViewState()
    }

        // Heleper function to get the price of an menu item
    fileprivate func getItemPrice(itemId: String) -> Double {
        let item = menuItems.first { item in
            item.id == itemId
        }

        return (Double(item!.price) ?? 0.0)
    }

        // Heleper function to get the total that amounts up after adding the items
    fileprivate func getTotalAmount() -> Double {
        return orderSummary.orderItems.reduce(0.0) { result, orderItem in
            result + (getItemPrice(itemId: orderItem.item) * (Double(orderItem.quantity) ?? 0.0))
        }
    }
}

// MARK: TableView Delegates

extension RestaurantMenuViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return menuItems.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: CellIdentifiers.RestaurantMenuTableViewCell, for: indexPath) as! RestaurantMenuTableViewCell
        cell.delegate = self
        cell.selectionStyle = .none
        cell.configureCell(for: menuItems[indexPath.row])
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
    }
}

// MARK: Order Update Delegates

extension RestaurantMenuViewController: OrderUpdates {

    internal func updateOrder( menuItem: inout Menu, quantity: Int) {
        if let row = orderSummary.orderItems.firstIndex(where: {$0.item == menuItem.id}) {
            if (quantity == 0) {
                orderSummary.orderItems.remove(at: row)
            } else {
                orderSummary.orderItems[row].quantity = "\(quantity)"
            }
        } else {
            orderSummary.orderItems.append(OrderItems(item: menuItem.id, quantity: "\(quantity)"))
        }

        orderSummary.totalAmount = "\(getTotalAmount())"
        updatePlaceOrderButton()
    }
}

// MARK: Networking

extension RestaurantMenuViewController {

    fileprivate func fetchMenu() {
        fetchState = .loading
        AF.request("https://restaurant-app.can.canonic.dev/api/menus")
            .validate()
            .responseDecodable(of: Menus.self) { [weak self] (response) in
                guard let availableMenus = response.value else { return }
                self?.menuItems = availableMenus.menus
                self?.fetchState = (response.error != nil) ? .failure : .success
                DispatchQueue.main.async {
                    self?.postMenuFetchActions()
                }
            }
    }

    fileprivate func placeOrder(parameters: [String: Any]) {
        fetchState = .loading
        updateViewState()
        AF.request("https://restaurant-app.can.canonic.dev/api/orders", method: .post, parameters: parameters as Parameters, encoding: JSONEncoding.default)
            .responseData { [weak self] response in
                if ((response.value) != nil) {                    
                    DispatchQueue.main.async {
                        self?.presentAlert(withTitle: "Order Placed 🥳", message: "Sit Tight, your order has been received!")
                        self?.orderSummary = Order()
                        self?.orderSummary.restaurant = (self?.restaurant.id)!
                        self?.updatePlaceOrderButton()
                        self?.fetchState = .success
                        self?.updateViewState()
                        self?.menuTableView.reloadSections(IndexSet(integer: 0), with: .bottom)
                    }
                } else {
                    DispatchQueue.main.async {
                        self?.presentAlert(withTitle: "Oops!", message: "Something went wrong, try again later!")
                        self?.updateViewState()
                        self?.fetchState = .failure
                    }
                }
            }
    }
}

Head over to RestaurantMenuTableViewCell and add the following code to setup our custom cell:

//
//  RestaurantMenuTableViewCell.swift
//  Restaurant App
//

import UIKit
import Alamofire
import AlamofireImage

class RestaurantMenuTableViewCell: UITableViewCell {

    @IBOutlet weak var itemImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var priceLabel: UILabel!
    @IBOutlet weak var quatityLabel: UILabel!
    @IBOutlet weak var stepper: UIStepper!

    var menuItem: Menu = Menu()
    var delegate: OrderUpdates?

    override func awakeFromNib() {
        super.awakeFromNib()
        itemImageView.contentMode = .scaleToFill
    }

    @IBAction func stepperClicked(_ sender: UIStepper) {
        quatityLabel.text = "x\(String(format: "%.0f", sender.value))"        
        delegate?.updateOrder(menuItem: &menuItem, quantity: Int(sender.value))
    }

    func configureCell(for menu: Menu) {
        menuItem = menu
        titleLabel.text = menu.itemName
        descriptionLabel.text = menu.description
        priceLabel.text = "$\(menu.price)"
        quatityLabel.text = "x\(String(format: "%.0f", stepper.value))"


        guard let image = menu.itemImage else { return }
        guard let urlString = image.url else { return }

        let request = URLRequest(url: URL(string: urlString.addingPercentEncoding(withAllowedCharacters: CharacterSet.urlQueryAllowed)!)!)
        AF.request(request).responseImage { response in
            if case .success(let image) = response.result {
                self.itemImageView.image = image
            }
        }
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        itemImageView.image = nil
    }
}

Step 5: Take the user to the Menu Listing

Now both of our viewControllers are set. Let's add the code to push the user to the menu listings when the user clicks on any restaurant. Head to RestaurantListingsViewController and update the pushToRestaurantMenuVC function:

fileprivate func pushToRestaurantMenuVC(for restaurant: Restaurant) {
        let restaurantMenuVC = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: StoryBoardID.RestaurantMenuViewController) as! RestaurantMenuViewController
        restaurantMenuVC.restaurant = restaurant
        self.navigationController?.pushViewController(restaurantMenuVC, animated: true)
    }

Build and run your app to see it in action 🥳 Now when you click on the it'll fetch the menu items of the restaurant and let you place your order.

And with that, you have successfully made a basic Food Ordering iOS App for your project. 💃🕺

Congratulations! 🎉

If you want, you can also duplicate this project from Canonic's sample app and easily get started by customizing it as per your experience. Check it out app.canonic.dev.

You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

ProductHunt Clone: React + Lowcode backend

Simranjot — Sat, 25 Dec 2021 07:04:56 +0000

We are going to build a very basic clone of Product Hunt today!

We'll be using:

React for building the frontend.
Material UI as our UI Library
Canonic as a Backend

📝 Step 1: Create-react-app

First thing first, create a new react project using - create-react-app

npx create-react-app product-hunt

You'll have the basic project setup with the boilerplate code.

📩 Step 2: Add the dependencies

Next, go to your project folder on the terminal and add all the required dependencies. As we disc

yarn add

We have the project setup and all the dependencies installed. On the frontend, our design will consist of:

A simple Header at the top.
A List below displaying the data we are gonna get from our backend (List of all the products).

👩‍🔧 Step 3: Build the Header

We'll create a component - Header at src/components/Header. Create the respective Header.js and index.js files.

Add following code to your index.js file

export { default } from "./Header";

Coming to our Header.js file, we'l be using the Box component from Material UI to build it. Add the following code:

import React from "react";
import { Avatar, Box, Divider } from "@mui/material";

const Header = () => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          marginBottom: "20px",
        }}
      >
        <Avatar
          sx={{
            bgcolor: "#da552f",
            width: 50,
            height: 50,
            fontWeight: 900,
            fontSize: "1.5rem",
          }}
        >
          P
        </Avatar>
      </Box>
      <Divider variant="fullWidth" />
    </Box>
  );
};

export default Header;

Our Header component is ready, let's add it to our layout to see how it looks. Head back to App.js, import the Header component:

import "./App.css";
import { Box } from "@mui/material";
import Header from "./components/Header/Header";

function App() {
  return (
    <div className="App">
      <Box
        sx={{
          margin: "20px 30px 0px 30px",
        }}
      >
        <Header></Header>
      </Box>
    </div>
  );
}

export default App;

It should like this:

📝 Step 4: Setup Data Stream

We'll use some dummy data as a data source at first to feed into our table and then replace it with the actual data coming in from the API. This way we'll be able to build our frontend properly and just have to replace the data coming into it without changing any of our frontend code.

This is how our data is gonna come in from the backend, so we'll mock it! Let's create a javascript file to hold it dummyData.js at src/

export const ProductsList = [
  {
    _id: "61c67c2916f6d70009932190",
    createdAt: "2021-12-25T02:04:25.797Z",
    updatedAt: "2021-12-25T02:04:25.797Z",
    name: "Canonic",
    description: "Super charge the back to your frontend.",
    brandImage: { url: null, alt: null, name: null },
    tags: [
      { label: "Dev Tools", value: "DEV_TOOLS" },
      { label: "Productivity", value: "PRODUCTIVITY" },
    ],
    upvotes: "498",
  },
  {
    _id: "61c67d0616f6d7000993219e",
    createdAt: "2021-12-25T02:08:06.651Z",
    updatedAt: "2021-12-25T02:08:06.651Z",
    name: "Mockups by Glorify",
    description: "Bring your designs to life with stunning mockups",
    brandImage: { url: null, alt: null, name: null },
    tags: [
      { label: "Design Tools", value: "DESIGN_TOOLS" },
      { label: "Free", value: "FREE" },
    ],
    upvotes: "470",
  },
  {
    _id: "61c67d4716f6d700099321a3",
    createdAt: "2021-12-25T02:09:11.389Z",
    updatedAt: "2021-12-25T02:09:11.389Z",
    name: "Chatfully",
    description: "All-in-one chat tool for teams - texting, web chat, & more",
    brandImage: { url: null, alt: null, name: null },
    tags: [{ label: "iPhone", value: "IPHONE" }],
    upvotes: "455",
  },
  {
    _id: "61c67d6f16f6d700099321a7",
    createdAt: "2021-12-25T02:09:51.782Z",
    updatedAt: "2021-12-25T02:09:51.782Z",
    name: "Nitro",
    description: "Fast, professional translations by native speakers, open API",
    brandImage: { url: null, alt: null, name: null },
    tags: [{ label: "Web App", value: "WEB_APP" }],
    upvotes: "410",
  },
  {
    _id: "61c67d8e16f6d700099321ab",
    createdAt: "2021-12-25T02:10:22.184Z",
    updatedAt: "2021-12-25T02:10:22.184Z",
    name: "SelectStar",
    description: "Automated data catalog and discovery for modern data teams.",
    brandImage: { url: null, alt: null, name: null },
    tags: [{ label: "Productivity", value: "PRODUCTIVITY" }],
    upvotes: "326",
  },
  {
    _id: "61c67da816f6d700099321af",
    createdAt: "2021-12-25T02:10:48.456Z",
    updatedAt: "2021-12-25T02:10:48.456Z",
    name: "Eraser",
    description: "A whiteboard that lets you focus on ideas",
    brandImage: { url: null, alt: null, name: null },
    tags: [
      { label: "Productivity", value: "PRODUCTIVITY" },
      { label: "Free", value: "FREE" },
    ],
    upvotes: "301",
  },
  {
    _id: "61c67dd316f6d700099321b4",
    createdAt: "2021-12-25T02:11:31.860Z",
    updatedAt: "2021-12-25T02:11:31.860Z",
    name: "Image to Cartoon",
    description: "Best AI cartoonizer online for free",
    brandImage: { url: null, alt: null, name: null },
    tags: [
      { label: "Productivity", value: "PRODUCTIVITY" },
      { label: "Free", value: "FREE" },
    ],
    upvotes: "264",
  }
];

📝 Step 5: Create Products List

Create our list component - ProductList at src/components/ProductList. Create the respective ProductList.js and index.js files. Add following code to your index.js file

export { default } from "./ProductList";

Coming to our main ProductList.js file, to build this component we'll be using the List component from MaterialUI.

We import the necessary dependencies from MaterialUI
Import our DummyData
Add a header for the List using the Typography component
Iterate over the data

import React from "react";
import { Typography, Box, List, Divider } from "@mui/material";
import { ProductsList } from "../../dummyData";

const ProductList = () => {
  const products = ProductsList;

  return (
    <Box>
      <Typography
        variant="h5"
        sx={{
          marginTop: 3,
          marginBottom: 2,
          color: "#4b587c",
          "&:hover": {
            color: "#da552f",
          },
        }}
      >
        Products
      </Typography>

      <List>
        {products.map((product) => {
          return (
            <Box>
              // Show List Items Here
            </Box>
          );
        })}
      </List>
    </Box>
  );
};

export default ProductList;

We have the basic skeleton ready for our List, now we'll create our ProductItem component which will actually show the data for a particular item in the List. Create the component - ProductItem at src/components/ProductList/components/ProductItem. Create the respective ProductItem.js and index.js files. Add following code to your index.js file

export { default } from "./ProductItem";

Add the following code to the ProductItem.js file. The Item has the:

Brand Image of the Product
Name
Description
Tags Associated
The Number of Upvotes

import React from "react";
import { Avatar, Box } from "@mui/material";
import { ListItem, ListItemText, ListItemSecondaryAction } from "@mui/material";
import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";

const ProductItem = ({
  name,
  description,
  tags,
  brandImage,
  upvotes = "0",
  isUpvoted = false,
  _id,
}) => {
  const [upvoted, setUpvoted] = React.useState(isUpvoted);

  const tagNames = tags.map((tag) => {
    return tag.label;
  });

  return (
    <ListItem disableGutters>
      <Avatar
        alt={name}
        src={brandImage.url ?? "notPresent"}
        sx={{ width: 80, height: 80, bgcolor: "#4b587c", marginRight: 2 }}
        variant="square"
      />
      <Box sx={{ display: "flex", flexDirection: "column" }}>
        <ListItemText
          primary={name}
          primaryTypographyProps={{
            fontSize: 16,
            fontWeight: "bold",
            letterSpacing: 0,
            color: "#21293c",
          }}
          secondary={description}
          secondaryTypographyProps={{ color: "#4b587c" }}
        ></ListItemText>
        <ListItemText
          primary={tagNames.join(" ・ ")}
          primaryTypographyProps={{
            fontSize: 11,
            fontWeight: 900,
            letterSpacing: 0,
            color: "#21293c",
          }}
        ></ListItemText>
      </Box>
      <ListItemSecondaryAction>
        // Add Upvote Button
      </ListItemSecondaryAction>
    </ListItem>
  );
};

export default ProductItem;

We'll create a custom Upvote Button component to and add it to our ProductItem. Create a new folder UpvoteButton at src/components/ProductList/components/ProductItem/UpvoteButton. Create the respective UpvoteButton.js and index.js files. This is how your folder structure should look like:

Add following code to your index.js & UpvoteButton.js files respectively:

export { default } from "./UpvoteButton";

import { Button } from "@mui/material";
import { styled } from "@mui/material/styles";

const UpvoteButton = styled(Button, {
  shouldForwardProp: (prop) => prop !== "upvoted",
})(({ upvoted }) => ({
  fontWeight: "bold",
  ...(upvoted && {
    color: "#da552f",
    borderColor: "#da552f",
    "&:hover": {
      backgroundColor: "#fff",
      borderColor: "#da552f",
    },
  }),
  ...(!upvoted && {
    color: "#767676",
    borderColor: "#767676",
    "&:hover": {
      backgroundColor: "#fff",
      borderColor: "#da552f",
    },
  }),
}));

export default UpvoteButton;

Head back to ProductItem.js file, import our new button component and add it:

// Import the button component
import UpvoteButton from "./Upvote Button";

...

<ListItemSecondaryAction>
    <UpvoteButton
        upvoted={upvoted}
        variant="outlined"
        disableRipple={true}
        startIcon={<ArrowDropUpIcon />}
    >
        {upvotes}
    </UpvoteButton>
</ListItemSecondaryAction>

...

Let quickly add our ProductItem to our List component to see how it looks. Head back to ProductList.js file and import our component:

import ProductItem from "./components/Product Item";

Add it to our List Component:

...

<List>
    {products.map((product) => {
        return (
        <Box>
            <ProductItem {...product}></ProductItem>
            <Divider />
        </Box>
        );
    })}
</List>

...

Our ProductList component is ready, let's add it to our layout's to see how it looks. Head back to App.js, import ProductList & update the <App> component.

import ProductList from "./components/Product List/ProductList";

...

<Box
    sx={{
        margin: "20px 30px 0px 30px",
    }}
    >
    <Header></Header>
    <ProductList></ProductList>
</Box>

...

When you refresh your page, it should look like this:

👩‍🔧 Step 6: Setup Backend

Let's head to Canonic and find the ProductHunt sample project from the Marketplace. You can either:

Use this sample project to and continue, or
Clone it and Deploy 🚀 . This will then use your data from your own project.

Once you deploy, the APIs will automatically be generated. Head on to the Docs and copy the /Products endpoint of the Products Table. This is the Get API that will fetch us the data from the database.

👩‍🔧 Step 7: Let's Integrate

Now, we need to hit the copied API endpoint to our backend and get all the products data. Head to your ProductList.js file and add the following code:

// Replace the dummy data with the data coming in from the backend
const [products, setProducts] = React.useState([]);

// Fetch the list of products and see the data
React.useEffect(() => {
  fetch(`https://product-hunt-18dcc2.can.canonic.dev/api/products`)
    .then((res) => res.json())
    .then((json) => json?.data)
    .then((products) =>
      Array.isArray(products) ? setProducts(products) : null
    );
}, []);

Now when you'll refresh your page, it'll make the API call to your backend endpoint, fetch the data and display!

🔽 Step 8: Integrate upvote functionality !

Let's Head over to your ProductItem.js file and trigger the upvote request on our backend.

Create a function handleUpvote which will make the API to our backend to record the upvote
Link the handleUpvote function to our upvote button's onClick.

Add the following code to do that:

// Add handleUpvote function inside our ProductItem component
...

  const handleUpvote = () => {
    setUpvoted(!upvoted);
    fetch(`https://product-hunt-18dcc2.can.canonic.dev/api/upvotes`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        input: {
          product: _id,
        },
      }),
    })
      .then((res) => res.json())
      .then((json) => json?.data);
  };

...

// Add the handleUpvote to the onClick of our Upvote Button

...

<ListItemSecondaryAction>
    <UpvoteButton
        upvoted={upvoted}
        variant="outlined"
        disableRipple={true}
        onClick={handleUpvote}
        startIcon={<ArrowDropUpIcon />}
    >
        {upvotes} 
    </UpvoteButton>
</ListItemSecondaryAction>

...

And with that, you have successfully made a basic Product Hunt clone for your project. 💃🕺

Congratulations! 🎉

If you want, you can also duplicate this project from Canonic's sample app and easily get started by customizing it as per your experience. Check it out app.canonic.dev.

You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

How to hydrate data from Stripe and Hubspot

Simranjot — Fri, 10 Dec 2021 18:44:03 +0000

We often integrate our systems with external services to support some features. Common example being, using Stripe for handling payments, using Hubspot as your CRM tool, and the list can go on. Naturally all of these services will have data points that you want to see at one place for better data visibility!

Let's see how we can connect with these external datasources and retrieve data from them in conjecture with your own platforms data. We'll be building a simple dashboard to get and show your customers information from your Stripe and Hubspot accounts together with your own database's data. Something like this 👇

So let's begin 🚀

We'll be using:

React for building the frontend.
Bootstrap as our UI Library
Canonic as a Backend
GraphQL for fetching the data.

📝 Step 1: Create-react-app

First thing first, create a new react project using - create-react-app

npx create-react-app customer-information

You'll have the basic project setup with the boilerplate code.

📩 Step 2: Add the dependencies

Next, go to your project folder on the terminal and add all the required dependencies.

yarn add react-bootstrap bootstrap@5.1.3 @apollo/client graphql@15.7.1

We have the project setup and all the dependencies installed. On the frontend, our design will consist of:

A simple Header at the top.
A Table below displaying the data we are gonna get from our integrations.
A Footer at the bottom.

👩‍🔧 Step 3: Build top-level containers

To build the layout we defined above, We'll use the following components from Bootstrap:

Navbar to build the top Header
Middle Container to hold our Table component
Container to build the Footer

Go to your App.js file and remove the boilerplate code and add the following:

// Import React and Bootstrap dependencies
import React from "react";
import { Container, Navbar } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import "./App.css";

function App() {
  return (
    <div className="App">
      {/* Header */}
      <Navbar className="mb-5 navbar-custom" variant="dark" sticky="top">
        <Container>
          <Navbar.Brand href="#home">Customer Information</Navbar.Brand>
        </Container>
      </Navbar>
      {/* Middle Container to hold our Table */}
      <Container>Show Customer Information Here !!</Container>
      {/* Footer */}
      <Container className="mt-3 pb-3 fw-bolder">
        Canonic ©2021 Created by Canonic Inc
      </Container>
    </div>
  );
}

export default App;

Remove all the pre-added css from your App.css file and add the following code:

/* Changing the color of the Header */
.navbar-custom {
  background-color: #020d57;
}

After completion of the above 3 steps, when you run using yarn start - the project should have something like this 👇

You can see we have our Header, Middle Content, and the Footer all in place. Let's build our Table Component that will show the data from our backend and add it to our middle container 🏃‍♂️

📝 Step 4: Setup Data Stream

This is how our data is gonna come in from the backend, so we'll mock it! Let's create a javascript file to hold it dummyData.js at src/

export const dummyData = {
  customers: [
    {
      hubspotCustomer: {
        properties: {
          email: "cras.lorem@aol.ca",
          company: "Thoughtbridge",
          phone: "123-4567",
        },
      },
      stripeCustomer: {
        address: {
          city: "Samos",
          country: "ES",
          line1: "Ctra. de Siles 98",
          line2: "",
          postal_code: "27620",
          state: "LU",
        },
        balance: 50,
        name: "Lila Gonzalez",
      },
    },
    {
      hubspotCustomer: {
        properties: {
          email: "cras.lorem@aol.ca",
          company: "Thoughtbridge",
          phone: "123-4567",
        },
      },
      stripeCustomer: {
        address: {
          city: "Samos",
          country: "ES",
          line1: "Ctra. de Siles 98",
          line2: "",
          postal_code: "27620",
          state: "LU",
        },
        balance: 50,
        name: "Lila Gonzalez",
      },
    },
  ],
};

We'll normalise this data in a way that we can feed into our Table. To display any table you'll need two things: Rows & Columns.

Our columns will represent what type of information will be displayed. For example Name, Email, Address, etc.
Our rows will have the actual information for the respective columns For example John Doe, johndoe@gmail.com, etc.

Let's create a utility function that will normalise the above data. Create a new file normaliseTableData.js at src/utils

// Gets all the columns that needs to be displayed along with the source from which they are being populated.
export const getColumns = () => {
  return {
    name: "Stripe",
    email: "Hubspot",
    phone: "Hubspot",
    company: "Hubspot",
    address: "Stripe",
    balance: "Stripe",
  };
};

// Maps in the data coming, normalizes it and returns an array of rows according to the columns.
export const getRows = (customers) => {
  return (customers ?? []).map((customer) => {
    const hubspotData = customer.hubspotCustomer.properties;
    const stripeData = customer.stripeCustomer;
    return {
      name: stripeData.name,
      email: hubspotData.email,
      phone: hubspotData.phone,
      company: hubspotData.company,
      address:
        `${stripeData.address.line1},` +
        ` ${stripeData.address.city},` +
        ` ${stripeData.address.country}`,
      balance: stripeData.balance,
    };
  });
};

📝 Step 5: Create InformationTable Component

We'll create a component - InformationTable at src/components/InformationTable. Create the respective InformationTable.js and index.js files.

Your folder structure would look like this 👇

Add following code to your index.js file

export { default } from "./InformationTable";

Coming to our main InformationTable.js file, to build this component we'll be using the Table component from Bootstrap to quickly display the information we get. We'll using the dummy data source set up to display and check if our UI is working properly before we integrate it with the backend.

<thead> element of bootstraps Table component sets up the columns. We'll loop over the columns we are getting from our normalised data.
<tbody> element sets up the rows of the table. So we'll loop over our rows here from our normalised data.

// Import React and Bootstrap dependencies
import React from "react";
import { Table } from "react-bootstrap";

// Import our util functions
import { getColumns, getRows } from "../../utils/normaliseTableData";

// Dummy Data Source
import { dummyData } from "../../dummyData";

const InformationTable = () => {
  const data = dummyData;
  const { customers = [] } = data;
  const columns = getColumns();
  const rows = getRows(customers);

    /* Getting class names according to the data source */
  const className = (key) => {
    return key === "Stripe" ? "bg-primary" : "bg-warning text-dark";
  };

  return (
    /* Bootstraps Table Component */
    <Table responsive hover bordered>
      <thead>
        <tr>
          <th class="align-middle">#</th>
          {/* Mapping over the columns and setting them up */}
          {Object.keys(columns).map((keyName) => {
            return (
              <th class="text-center align-middle" key={keyName}>
                <div>{keyName.toUpperCase()}</div>
                                {/* Showing a bagde to see from where the data came from */}
                <span className={`badge ml-5 ${className(columns[keyName])}`}>
                  {columns[keyName]}
                </span>
              </th>
            );
          })}
        </tr>
      </thead>
      <tbody>
        {rows.map((customer, index) => {
          return (
            <tr key={index}>
              <td class="align-middle fw-bolder font-monospace">{index}</td>
              {/* Mapping over the rows and setting them up */}
              {Object.keys(customer).map((keyName, index) => {
                return (
                  <td class="col-2 align-middle text-center " key={index}>
                    {customer[keyName] ?? "N/A"}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </Table>
  );
};

export default InformationTable;

Our InformationTable component is ready, let's add it to our layout's middle container to see how it looks. Head back to App.js, import InformationTable & update the <Container> element.

// Import Information Table
import InformationTable from "./components/InformationTable/InformationTable";

{/* Middle Container to hold our Table */}
<Container>
    <InformationTable></InformationTable>
</Container>

Here's what it should look like after successful completion. 👇

👩‍🔧 Step 6: Setup Backend

Let's head to Canonic and clone this template to get started. It has same integrations for Stripe & Hubspot added for you. You can either:

Use this sample project to and continue, or
Clone it, replace the Stripe & Hubspot credentials with yours and hit Deploy 🚀 . This will then use your data from the services to fetch.

You can see the GraphQL API Endpoint in the Docs Section of your project.

🔽 Step 7: Configure GraphQL

We are using ApolloClient to connect with our backend through GraphQL. Head to App.js and:

Import the new dependencies
Configure ApolloClient
Wrap our top component with ApolloProvider

// Import Apollo Dependencies
import { ApolloProvider, InMemoryCache, ApolloClient } from "@apollo/client";


...

import "./App.css";

/**
 * Connecting with the backend using apollo client
 */
const client = new ApolloClient({
  // Make sure you update the URI here to point to your backend
  uri: "https://customer-information.can.canonic.dev/graphql",
  cache: new InMemoryCache({
    addTypename: false,
  }),
});

...

// Wrap our top component in ApolloProvider
function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">

        ...

      </div>
    </ApolloProvider>
  );
}

Note: Replace the uri with your GraphQL API Endpoint if you cloned and deployed your own project.

🙌 Step 8: Configure Data Querying

After setting up our Client, let's set up the query (API Call) that we are gonna make to our backend. You can head to the docs section of your project and can copy it directly from there 👇

Let's create a javascript file to hold it queries.js at src/gql and add the following code to setup the query:

import { gql } from "@apollo/client";

/**
 * gql query to get customers information
 * The query parameters we got straight from Canonic autogenerated documentation
 */
export const GET_CUSTOMERS_INFO = gql`
  query {
    customers {
      stripeCustomer {
        address
        balance
        email
        name
        phone
      }
      hubspotCustomer {
        properties
      }
    }
  }
`;

We stripped out the parameters whose information we don't need to display on our dashboard. GraphQL let's you do that!

🏃‍♂️ Step 9: Let's Integrate !!

Head to InformationTable.js where we'll execute our above query to fetch data from the backend. To do that:

Add the required dependencies that are needed to execute the query
Execute the query and replace the data coming from it with our dummyData

// Import Quering dependencies
import { useQuery } from "@apollo/client";
import { GET_CUSTOMERS_INFO } from "../../gql/queries";

...

const InformationTable = () => {
//   const data = dummyData;
  const { data = {}, loading } = useQuery(GET_CUSTOMERS_INFO);
  const { customers = [] } = data;

    ...

};

Here's what it should look like after successful completion. We just replaced our dummyData with our actual data and the frontend worked like a charm 👇

Since the API Call is an asynchronous operation, we show a loading indicator instead of our table at that time. Let's add that and our project will be complete.

We'll be using the Spinner component from Bootstrap to show the loading indicator.
We'll show/hide it on the basis of the loading variable that we get from our useQuery() function. It has the updated information wether the API call is still in the process or not.

// Update the bootstrap dependencies
import { Table, Spinner } from "react-bootstrap";

const InformationTable = () => {
  const { data = {}, loading } = useQuery(GET_CUSTOMERS_INFO);

    ...

/* Show loading indicator is the API call is in progress */
  if (loading)
    return (
      <div className="d-flex justify-content-center">
        <Spinner animation="border" />
      </div>
    );

  ...

  );
};

Here's what it should look like after when loading 👇

And with that, we have successfully made the whole project end to end . 💃🕺

Congratulations! 🎉

Live Link
Sample code on GitHub

Conclusion

Hope this guide helped you gain better insight about creating a dashboard that fetches data from Stripe and Hubspot, how you can structure it, and how to quickly get a basic dashboard up and running. You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

Build request forms using React, Ant Design, and a lowcode backend

Simranjot — Sat, 04 Dec 2021 21:19:05 +0000

Request/contact form is something that is required for most companies. This article will ease your way of making a copy of the Request/Contact form for your project.

This is a step-to-step guide on how one can build a Request form with low code. So let's begin!🚀

📝Step 1: Create-react-app

First thing first, create a new react project using - create-react-app



npx create-react-app forms

📩 Step 2: Add the dependencies

Next, go to your project folder on the terminal and add all the required dependencies.



yarn add antd // For building the frontend on ant design

👩‍🔧Step 3: Edit and create a skeleton

We'll use the Layout component from Ant design library to layout our content, where we'll add the Header, Content and Footer components to our layout.

Here, we'll have two menu items, one for each of the forms - Contact Us and Get a Demo.

In the middle of the page, we'll place our form components -Contact Us and Get a Demo and a Footer at the bottom.

We are keeping <Content> empty for now, we'll add them once we make our forms.

Go to your App.js file and remove the boilerplate code and add the following:



import React from "react";
import "./App.css";

import { Layout, Menu } from "antd";
import "antd/dist/antd.css";

const { Header, Content, Footer } = Layout;

const App = () => {
  return (
    //Layout Component
    <Layout className="layout">
      <Header // Header Component
        style={{
          position: "fixed",
          zIndex: 1,
          width: "100%",
        }}
      >
        <div className="logo" />
        <Menu // Header Tabs
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["contactUs"]}
        >
          <Menu.Item key="contactUs" style={{ color: "#ffffff" }}>
            Contact Us
          </Menu.Item>
          <Menu.Item key="getADemo" style={{ color: "#ffffff" }}>
            Get a Demo
          </Menu.Item>
        </Menu>
      </Header>
      <Content // Content Component
        className="site-layout"
        style={{
          marginTop: 64,
          padding: 20,
          paddingBottom: 0,
        }}
      >
        <div className="site-layout-background"></div>
      </Content>
      <Footer
        style={{ textAlign: "center", backgroundColor: "fff" }} // Footer Component
      >
        Canonic ©2021 Created by Canonic Inc
      </Footer>
    </Layout>
  );
};

export default App;

We are keeping the component empty for now, we'll add our Forms once we make them.

✨Step 4: Add some styling

To add some basic styling in the code, edit - src/App.css



#components-layout-demo-fixed .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.2);
}
.site-layout .site-layout-background {
  background: #fff;
}

After completion of the above 4 steps, you should have something like this 👇

📝Step 5: Let's create the first form - Contact Us

We'll create a component - ContactForm at src/components/Contact Form. Create the respective ContactForm.js and index.js files.

Your folder structure would look like this 👇

Add following code to your index.js file



export { default } from "./ContactForm";

Coming to your main ContactForm.js file! We'll use the Form components of Ant Design for all our input fields (FirstName, LastName, Email, etc.). They've got multiple attributes through which you can configure different settings of your input fields like Required Fields, Custom Error Message, etc. A button at the end of the form, which will let the users submit their request.



// Import React & Ant Design Dependencies
import React from "react";
import { Form, Input, Button, Typography } from "antd";

const ContactForm = () => {
  const [form] = Form.useForm();
  const { Title, Text } = Typography;
  return (
    <div>
      <Title // Form's Title
        level={3}
        style={{
          marginBottom: 0,
          paddingTop: 20,
          paddingLeft: 30,
          paddingRight: 30,
        }}
      >
        ✉️ Contact Us!
      </Title>
      <Text // Form's Description
        type="secondary"
        style={{
          paddingLeft: 30,
          paddingRight: 30,
        }}
      >
        Let us know how we can help you.
      </Text>
      <Form // Ant Design's Form Component
        name="contact-us"
        layout="vertical"
        form={form}
        wrapperCol={{
          span: 6,
        }}
        style={{
          marginTop: 20,
          paddingBottom: 10,
          paddingLeft: 30,
          paddingRight: 30,
        }}
      >
        <Form.Item // Form Item (First Name)
          label="First Name"
          name="firstName"
          required
          tooltip="This is a required field"
          rules={[
            {
              required: true,
              message: "Please enter your first name!",
            },
          ]}
        >
          <Input placeholder="First Name" />
        </Form.Item>
        <Form.Item // Form Item (Last Name)
          label="Last Name"
          name="lastName"
          required
          tooltip="This is a required field"
          rules={[
            {
              required: true,
              message: "Please enter your last name!",
            },
          ]}
        >
          <Input placeholder="Last Name" />
        </Form.Item>
        <Form.Item // Form Item (Email)
          label="Email"
          name="email"
          required
          tooltip="This is a required field"
          rules={[
            {
              required: true,
              message: "Please enter your email!",
              type: "email",
            },
          ]}
        >
          <Input placeholder="Email" />
        </Form.Item>
        <Form.Item // Form Item (Message)
          label="Type your message here"
          name="message"
          required
          tooltip="This is a required field"
          rules={[
            {
              required: true,
              message: "Message is a required field!",
            },
          ]}
        >
          <Input.TextArea
            placeholder="Message ..."
            autoSize={{ minRows: 4, maxRows: 6 }}
          />
        </Form.Item>
        <Form.Item // Form Item (Submit Button)
        >
          <Button type="primary">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default ContactForm;

Our ContactForm component is ready, let's add it to our layout's content to see how it looks. Head back to App.js, import ContactForm & update the <Content> component.



// Import ContactForm Component
import ContactForm from "./components/Contact Form";

// Add <ContactForm> in our <Content> component
...
<Content // Content Component
    className="site-layout"
  style={{
    marginTop: 64,
    padding: 20,
    paddingBottom: 0,
  }}
 >
  <div className="site-layout-background">
    <ContactForm></ContactForm>
  </div>
</Content>
...

Here's what it should look like after successful completion. 👇

You can now add data to these fields and the required validation errors will also automatically pop up wherever necessary.

As of now, the submit button does not do anything. We want to store this information and trigger an email internally to the concerned people to take action whenever the form is submitted.

Let's head to canonic. Find the Canonic-Forms sample project, clone this project and deploy. 🚀

Once you deploy, the APIs will automatically be generated. Head on to the Docs and copy the /Create contact us endpoint of the Contact us Table. This is the POST API that will store the form data in the database.

👩‍🔧Step 6: Let's Integrate

Now, we need to hit the copied API endpoint to our backend and store the submission. We'll create a util function to do that and trigger it when the user hits the submit button. We'll create a new file - useContactUs.js at src/utils/apis.

Add the following code and replace the YOUR_URL_HERE with the URL that you just copied.



const UseContactUs = async (data) => {
  const url = "YOUR_URL_HERE";

  const submitRequest = async (reqBody) => {
    try {
      const res = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ input: reqBody }),
      });
      const json = await res.json();
      return { response: json, error: undefined };
    } catch (error) {
      return { response: undefined, error: error };
    }
  };

  return await submitRequest(data);
};

export default UseContactUs;

🔽Step 7: Add the submit button!

Let's Head over to your ContactUs.js file and trigger this submit request function to post the data on our backend.

Import the useContactUs.js file
Create a function onSubmit which will first validate the form fields and then make a request to our backend to store the filled information.
Create a function handleSubmission that will reset our fields if the request is successful or show an error if not.
Link the onSubmit function to our submit button's onClick.

Add the following code to do that:



...
// Import useContactUs.js
import UseContactUs from "../../utils/apis/useContactUs";

// Add onSubmit & handleSubmission functions inside our //ContactForm component
...

const [form] = Form.useForm();
const { Title, Text } = Typography;

const handleSubmission = React.useCallback(
    (result) => {
      if (result.error) {
        // Handle Error here
      } else {
        // Handle Success here
        form.resetFields();
      }
    },
    [form]
  );

const onSubmit = React.useCallback(async () => {
    let values;
    try {
      values = await form.validateFields(); // Validate the form fields
    } catch (errorInfo) {
      return;
    }
    const result = await UseContactUs(values); // Submit the form data to the backend
    handleSubmission(result); // Handle the submission after the API Call
  }, [form, handleSubmission]);


...

// Add the onSubmit to the onClick of our Submit Button

<Form.Item // Form Item (Submit Button)
>
 <Button type="primary" onClick={onSubmit}>
   Submit
 </Button>
</Form.Item>

...

Let's head to our app to see if it's working as expected. If you now try submitting the details with out any data, the validation will show up. Otherwise, the request to our backend will start happening.

🙌Step 8: Let's handle the results now!

We want to show a notification to the user after the submission. Ant Design has a notification component here that we can use. Let's create a new file showNotification.js at src/utils/views where we can write the code to show these notifications and use it in our ContactUs component.



import { notification } from "antd";

const showNotification = (type, details) => {
  notification[type]({
    message: details.message,
    description: details.description,
  });
};
export default showNotification;

We also create a new Constants.js file at src/utils/constants that can hold the messages for success and error:



const NOTIFICATION_DETAILS = {
  success: {
    message: "Details Submitted!",
    description:
      "We've got your information. Our team will get in touch you shortly!",
  },
  error: {
    message: "Something went wrong!",
    description: "Please try again later or email us to support@company.dev!",
  },
};


export default NOTIFICATION_DETAILS;

🔔Step 9: Showing of notification!

Let's go back to our ContactUs.js component. We'll use our handleSubmisson function to show there notifications.



...
//Import the new Notification and Constants files
import NOTIFICATION_DETAILS from "../../utils/constants/Constants";
import showNotification from "../../utils/views/showNotification";

... 
const handleSubmission = (result) => {
    if (result.error) {
      showNotification("error", NOTIFICATION_DETAILS.error); // Show Success Notification
    } else {
      showNotification("success", NOTIFICATION_DETAILS.success); // Show Error Notification
      form.resetFields();
    }
  };
...

After the submission, you'll see the success notification like this 👇

And with that, you have successfully made the contact forms for your project. 💃🕺

Congratulation! 🎉

Live Demo
Sample Code

If you want, you can also clone this project from Canonic's sample app and easily get started by customizing it as per your experience. Check it out here.

You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.