Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

RSN ridoansaleh

🎯
Focusing
View GitHub Profile
View restapi_projects.md

RESTAPI PROJECTS

This is a list of my RESTAPI projects that i created from scratch or just copy paste from tutorial websites after following the instructions. I'm aware that consistency is the key to improve my skills in Backend.

Since i'm not a Backend Developer it has been hard to me to keep up and build RESTAPI project. The other thing is i have NO big desire to do so. I'll try to improve my passion and do some Backend projects in 2021 (this year).

  1. Cinema21 GraphQL

    status: Not completed
    tech: Node.Js

View nodejs_restapi_plan.md

STAFF LIST RESTAPI PLAN

Tutorial to follow: Creating a Secure REST API in Node.js

Project Name: Staff List RestAPI
Database: MongoDB Atlas (Cloud Database)
Framework: Express

Features

  1. Create a company as a user (Registration / Sign Up) ==> (POST)
View my-projects.md
View cra-environment-variables.md

Customizing Environment Variables for Arbitrary Build Environments. This is possible by using env-cmd library.

1. .env.cmdrc

{
  "dev:website-a": {
    "REACT_APP_ENV": "development",
    "REACT_APP_WEBSITE": "website a"
  },
View react-example-app.css
.App {
padding: 0 20px;
max-width: 700px;
}
.submit-btn {
margin-left: 5px;
}
.button-wrapper {
View react-example-app.js
import React, { useState, useEffect } from "react";
import "./App.css";
function App() {
const [page, setPage] = useState(1);
const [posts, setPosts] = useState([]);
const [title, setTitle] = useState("");
useEffect(() => {
getPosts(page);
View react-example-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
View source-of-data.md

Source of Data

Redux

Positive :

  • More like real implementation
  • React component know when there is a new update

Negative :

  • Can't handle filter feature on minimal code
View loose-coupling.md

Loose Coupling in React.Js

Home page contains:

  • Filter
  • RequestList

Strategies :

1. S-1

View select-search.md

Select Search

Options with "No Match"

const options = [
  {
    val: "Messi",
    desc: "Forward"
  },
  {