Skip to content

Instantly share code, notes, and snippets.

View markodayan's full-sized avatar
🍑

Mark Odayan markodayan

🍑
47 followers · 144 following
View GitHub Profile
@markodayan
markodayan / utility.module.css
Created June 21, 2020 11:34
utility class example
.heading2Xl {
font-size: 2.5rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingXl {
font-size: 2rem;
@markodayan
markodayan / _app.js
Created June 24, 2020 08:59
Next.js Custom App Component (In pages root dir to apply global styles)
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
@markodayan
markodayan / layout.js
Created June 24, 2020 09:05
Next.js Layout Component (Wrapping Layout around the custom App)
import Head from 'next/head';
import Navbar from './Navbar';
const Layout = ({ children }) => {
return (
<div>
<Head>
@markodayan
markodayan / app.js
Created June 29, 2020 11:52
Serve Front end App (Client) from Node.js Backend
// set static folder pointing to built client app
app.use(express.static('client/build'));
@markodayan
markodayan / database.sql
Created July 10, 2020 12:50
Express Server with PostgreSQL CRUD routes
CREATE DATABASE perntodo;
CREATE TABLE todo(
todo_id SERIAL PRIMARY KEY,
description VARCHAR(255)
);
@markodayan
markodayan / example.js
Last active July 14, 2020 07:42
Creating Middleware in Express (Important Steps)
// Will create a middleware called logger
// middleware is a called function requiring inputs of (req,res,next) that runs with every http request (if global app middleware)
// next MUST be called to continue on with the http request
const logger = (req,res,next) => {
req.hello = 'Hello World';
console.log('Middleware ran');
next();
};
@markodayan
markodayan / assertion-library.js
Created July 18, 2020 12:01
Assertion Libary Basic Example (JS Testing)
const { sum, subtract } = require('../math'); // const sum = (a, b) => a - b; const subtract = (a, b) => a - b;
// sum is intentionally wrong to check if error handling is done according to our assertion function
let result, expected;
result = sum(3, 7);
expected = 10;
expect(result).toBe(expected);
result = subtract(7, 3);
@markodayan
markodayan / App.js
Last active August 6, 2020 13:11
React Native Expo Project Setup
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
// Screen
import IndexScreen from './src/screens/IndexScreen';
const navigator = createStackNavigator(
@markodayan
markodayan / BlogContext.js
Created August 5, 2020 10:51
Automating Context Creation (Useful but Complex!)
import React, { createContext, useState, useReducer } from 'react';
import createDataContext from './createDataContext';
const initialState = [];
const blogReducer = (state, action) => {
switch (action.type) {
case 'ADD_BLOGPOST':
return [...state, { title: `Blog Post #${state.length + 1}` }];
@markodayan
markodayan / App.js
Last active August 6, 2020 13:46
advanced App.js for Multiple RN Navigation Options
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// React Navigation
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
// Screen
import AccountScreen from './src/screens/AccountScreen';
import DashboardScreen from './src/screens/DashboardScreen';
import IndexScreen from './src/screens/IndexScreen';