REACT - NEXTJS - STYLED COMPONENTS - SASS 

REACT - NEXTJS - FIREBASE - STRIPE - STYLED COMPONENTS

REACT - STYLED COMPONENTS - SASS - NEXTJS - PRISMIC API

REACT - STYLED COMPONENTS - SASS - FETCH - FRAMER MOTION

REACT - NEXTJS - SASS - STYLED COMPONENTS - CLOUDINARY - NODE - REACT SPRING

REACT - AXIOS - REDUX - SOCKET.IO - JEST - CHARTJS

Eli Codes

A Quick tutorial on how to map keys and shortcuts to a windows 10 computer. You can also remap keys directly from PowerToys, instead of using Sharpkeys.

SharpKeys: 
https://www.randyrants.com/category/sharpkeys/

Microsoft PowerToys:
https://github.com/microsoft/PowerToys

PowerToys Download Link:
https://github.com/microsoft/PowerToys/releases/

Windows Keyboard Shortcuts:
https://support.microsoft.com/en-us/windows/keyboard-shortcuts-in-windows-dcc61a57-8ff0-cffe-9796-cb9706c75eec

Apple Keyboard Shortcuts:
https://support.apple.com/en-us/HT201236

Thumbnail Photo:
Photo by Amy Hirschi on Unsplash

Map Keys and Shortcuts for Apple Keyboard on Windows 10 Computer 4K 2020 | Easy Tutorial

#3 Figma Design + React 2020 |  Responsive E-Learning Site

Today's video is on the development of the UI for an E-Learning Website

The design was made in Figma & the coding was done in VSCode.

Live Site:
https://figma-react-blur.vercel.app/

Design: 
https://www.figma.com/file/peT8tKA62W4C20gfhPIOIL/E-Learning-Site?node-id=0%3A1

GitHub:
https://github.com/iamelimars/figma-react-blur

Hero Image:
Instagram.com/
@gouthamgtronics
https://www.figma.com/file/rBDauJqxvfJcbGmjYLmh8q/Free-3D-Mac-Illustrations-Community?node-id=0%3A1

Music:
"Good Intentions"
Instrumental by Homage
https://youtu.be/j3b7Yf-z52g
IG: @HomageBeats

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Social:
Instagram: @iamelimarss

Get $100 free with Digital Ocean hosting 💰💰💰
https://m.do.co/c/a63072097f2c

Figma Design + React 2020 |  Responsive E-Learning Site | UI /UX | Styled Components

In this video, we will be making a responsive navbar with react and styled components

⏱️TIMESTAMPS⏱️
0:00 Intro
0:25 Setup Project & Install Dependencies
3:01 App.js
4:42 Navbar.js
16:50 Responsive Nav
21:33 State Management
24:22 Animation
24:53 Outro

Live Site:
https://responsive-nav.vercel.app/

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music:
"Design"
Instrumental by Homage
https://www.youtube.com/user/homage253

GitHub:
https://github.com/iamelimars/responsive-nav

Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss...


Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Responsive Nav with Styled Components - Beginner React Project

#2 Figma Design + React | Startup Sign Up Page
Today’s video is on the development of the ui for a sign up page, made in react.

The design was made in Figma & the coding was done in VSCode.

Design:
https://www.figma.com/file/iplx8vxEZYMVWi2bog8bJf/React-Signup?node-id=0%3A1

Design Inspiration:
https://dribbble.com/shots/13870055-Adobe-Xd-sign-up-form

Live Site:
https://figma-react-signup.vercel.app/

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music:
"Ether"
Instrumental by Homage
https://youtu.be/ogV_hVhnUpA

GitHub:
https://github.com/iamelimars/figma-react-signup


Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en


Get $100 free with Digital Ocean hosting 💰💰💰
https://m.do.co/c/a63072097f2c

Figma Design + React | Sign Up Page | UI /UX | Styled Components

#2 Figma Design + React Native | House Sales App Home Page - Styled Components

Today’s video is a speed code for a house sales application, similar to zillow.

The design was made in Figma by (Wildanux)  & the coding was done in VSCode.

Designer:
Wildanux
https://ui8.net/wildanux/products/salses-mobile-apps

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music: 
"Trouble"
Instrumental by Homage
https://youtu.be/_1shddddO88


Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Figma Design + React Native | House Sales App Home Page - Styled Components | Speed Code

In this video, we will be jumping back into our ecommerce site and add the functionality for saving our cart in localstorage

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Finished Project: https://shopify-react.now.sh/ 
(I have added some extra styling to the site that wasn't put in the video)

Github Link: https://github.com/iamelimars/shopify-react

Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Music:
"Cruise" 
Instrumental by Homage:
https://www.youtube.com/user/homage253


Get $100 free with Vultr hosting 💰
https://www.vultr.com/?ref=8584529-6G

Build a custom e-commerce site using React and Shopify. Part 2

Today’s video is a speed code for a mortgage calculator.

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music:
"sirens"
Instrumental by Homage
https://youtu.be/Z_Bcg9at-yc


Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Mortgage Calculator + React | styled-components

In this video we will be making mobile device mockups in react to use for your personal portfolio.


Example: 
https://device-mockup.now.sh/

Assets:
https://device-mockup.now.sh/static/media/Alert.6db42e0b.png
https://device-mockup.now.sh/static/media/Courses.6246d440.png

Design Screenshots:
https://dribbble.com/paolospazzini

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Figma Device Mockups with React | Dark Mode | styled-components

#1 Figma Design + React | Dashboard App Deposits Page - Light/Dark Mode

Today’s video is a speed code for a real estate management application

The design was made in Figma & the coding was done in VSCode.

Live Site:
https://figma-react-dashboard.now.sh/

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music:
"Design"
Instrumental by Homage
https://www.youtube.com/user/homage253

GitHub:
https://github.com/iamelimars/figma-react-dashboard


Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en


Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Figma Design + React | Dashboard App Deposits Page - Light/Dark Mode

In this video, we will be creating a simple e-commerce site with Shopify as our headless commerce / backend. We will also be using React us as our frontend.

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Finished Project: https://shopify-react.now.sh/ 
(I have added some extra styling to the site that wasn't put in the video)

Github Link: https://github.com/iamelimars/shopify-react

Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Build a custom e-commerce site using React and Shopify

In this video, we will create loading skeletons for our data. Something similar to how YouTube's loading screens look.



Links:

API: https://json-placeholder-api.now.sh/api/profiles

Finished Project: https://react-skeleton.now.sh/

Github Link: https://github.com/iamelimars/react-skeleton

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Hello,

I'm Eli

ABOUT ME

Dev Stack

PORTFOLIO

Wave Running Rentals

React Shopify

Eli Codes

Social Media Links

Blurred Home Page Concept

Sign Up Page Concept

IG Dashboard Concept

Chef Valencia Marshall

SJC Multimedia Design

Coin Compare

TUTORIALS