
# Simple Recipes

**_data can only be added from CMS Contentful_**

2x ways to add programmatically, through gatsby-node actions.createPage and on pages/{Contentful.title}

- gatsby: framework
- formspree: get email from contact form
- tailwindcss: css
- @tailwindcss/forms: css forms
- gatsby plugin
  - gatsby-plugin-image: deal with images setup
  - gatsby-source-contentful: CMS server to deal with data
  - gatsby-plugin-react-helmet: SEO Google crawlers
- react-icons: css icons


Simple Recipes


## Only Javascript

- TIMER
  used _class_ and svg

- Movie Fight
  debounce function. reuseable code to have 2x autocomplete

more to come...


Javascript


# Web Chat

## Frontend

- socket.io client: connect to sockets
- mustache: render dynamic html
- moment: parse date time
- qs
- materializecss: css framework
- javascript: autoscroll

## Backend

- express: web server framework
- bad-words: avoid profanity
- socket.io: create sockets


Chat App


# NASA Mission Control

what it does

_scripts to have the react-build served by the backend_

## Frontend

- react framework
  - useCallback to memorize the returned value
- arwes css framework bases on react

## Backend

- nodejs
- express: middleware to handle routing and much more
- csv-parse: to read csv files
- cors: to handle the access origin protocol
- morgan: logging middleware
- jest: to perform code tests
- supertest: test api responses
- pm2: to creater clusters for load balance
- mongoose: connect to mongodb
- axios: to query apis


Nasa Mission Control


# Movies GO

React APP with GO backend

**Backend**

- [HttpRouter](github.com/julienschmidt/httprouter)
- [Graphql GO](github.com/graphql-go/graphql)
- [A pure Go postgres driver](https://github.com/lib/pq)
- [JSON WEB TOKEN](github.com/pascaldekloe/jwt)
- [Chain Middleware](github.com/justinas/alice)
- [Enviorenment](github.com/joho/godotenv)

**Frontend**

- [Bulma](https://bulma.io/)
- [route-dom V6](https://reactrouterdotcom.fly.dev/)


GO Movies


# Amazona Ecommerce

short description what the APP does:

**Authentication**

- register
- login/logout
  only logged in you can add buy products
- if you are admin you have access to a dashboard where you can:
  you can add/edit/delete products/users, view orders ,ship merchandise

**ADD/EDIT/DELETE Products**
only an admin user can CRUD products/users

**Rating**
you can leave a raiting and comment to a product

**Cart**
you can add products to the cart and then order with paypal

**Orders**
you can views the history of your orders

**pagination**
used mongo pagination to load the products

**filters**
used mongoose to filter by name/category

**index/product page**
the index page and the product page are static meaning that they will load fast, and be rebuild in 10 sec if the data changed.

**api**
only admin can see the dashboard, if not it will be redirected

**cookies**
to save state so when you refresh you won't lose the state

**notifications**
build notifications with context

**packages used**

- paypal
  for payments
- bulma
  css framework
- chart.js
  graphics for sales
- cloudinary
  upload pictures products
- js-cookie
  to save state on cookies
- mongoose
  save data
- nextjs
  react framework
- next-connect
  to work with nextjs api
- nprogress
  when SSR (server side render) we have a loading status
- react-hook-form
  easy way to have forms
- react-stars
  to have raitings


Amazona Ecommerce


# Bookings and Reservations

built in GO and Postgres as database

**GO dependencies**

- [SCS Session Manager](github.com/alexedwards/scs/v2)
- [Chi Router](github.com/go-chi/chi)
- [NoSurf](github.com/justinas/nosurf)
- [GoValidator](https://github.com/asaskevich/govalidator)
- [PGX Postgres connect](https://github.com/jackc/pgx/v4)
- [SMTP GO Simple Email](https://github.com/xhit/go-simple-mail)

**JS dependencies**

- [Notie](https://github.com/jaredreich/notie) for alerts
- [Vanillajs Datepicker](https://github.com/mymth/vanillajs-datepicker) for dates
- [SweetAlert2](https://github.com/sweetalert2/sweetalert2) for modals
- [Simple Data Tables](https://github.com/fiduswriter/Simple-DataTables#readme) for data tables

**others for testing purposes**

- [MailHog] (https://github.com/mailhog/MailHog)


Bookings GO


# Upstar Music

added a few artists with faker library

- **Creating Artist**
  you can create manual or automatic (generated by faker) artists

- **Editing Artists**
  you can edit artists and add Albuns

- **Deleting Artists**

- **Pagination**
  you have pagination that is updated with the filter

- **Filter**
  _you can filter data by:_
  - name
  - age range
  - years active range
    and then submit the filter
    sort and order is submitted automaticaly.
    you can clear your filters

## libraries used

- **faker:** for data generated
- **mui:** css framework
- **mongodb/mongose** as dababase
- **nextjs:** framework. index page and artists are static pages. if you **CRUD** an artist it will take 10 seconds to build the page
- **useContext:** to have some global state, so you navigate between pages without loosing your filters
- **unslash:** faker images are not working, so I fetching images from unsplash


Upstar Music


# Remix Expenses

remix where you can worker server and client code at same level

## libraries used

- **tailwindcss:** CSS framework
- **mongodb** as dababase
- **remix:** framework.
- **prisma:** ORM


Remix Expenses


# NodeJS Ecommerce Models Viewers Controlers

short description what the APP does:

**Authentication**

- signup
- login/logout
  only logged in you can add products and or buy products
- password reset
  you will receive an email to reset your password

**ADD/EDIT/DELETE Products**
any user can add products, and only this user can EDIT/DELETE his own product

**Cart**
you can add products to the cart and then order with stripe

**Orders**
you can get all your orders as pdf

**ERROR handling**
handling 404 and 500 pages

**pagination**
used mongo pagination to load the products into chucks

**packages used**

- docker
  to run 2x processes at sime time, nodejs and mongo
- nodejs
  the backend server
- mongodb
  the database
- mongoose
  mongodb friendly user, able to create models
- express
  to create a web server over nodejs
- express-session
  create session cookies to diferenciate users
- express-validator
  to check inputs
- connect-mongo
  to save sessions on database
- EJS
  template engines to render html pages
- multer
  to save files localy
- flash
  to add notifications
- pdfkit
  to generate pdfs
- stripe
  for card payments
- sendgrid
  send emails from the app


Nodejs Ecommerce MVC


# Tailwindcss Projects

dummy sites made with tailwindcss.

## miniprojects

- email subscribe
- image galery
- login modal
- pricing Cards
- Product Modal

## macro projects

- clipboard
- loopstudios
- shortly


Tailwindcss Projects


# Netlify examples

why, netlify functions? so, you can use CMS keeping your API keys in backend

**Hello World**
simple response

**Basic API**
fetch data from unsplash

**Airtable CMS**
fetch all data from CMS with airtable-node
fetch data for a single product

**Survey**
update data into airtable

**Weather**
API with for OpenWeatherAPI

**Newsletter**
subscribe for a newsletter

**Email**
send emails with sendgrid

**stripe**
for payments
