Work from is a web app created by Josh Cawthorne for the Supabase Hackathon.

Overview

Work From Logo

Work From

What is Work From?

Work from is a web app created by Josh Cawthorne for the Supabase Hackathon.

The concept of the app is for companies to be able to sign-up, and enable employees to share which days they're working in the office, and which days they're working from home, to allow better planning on when teams should be in the office.

Do you have a demo video?

Funny you should ask. I do! Here's a short walk-through video explaining the app: https://www.loom.com/share/b6a4f67bcc8b405da4038665262d8805.

Just so you know, Loom offers the ability to watch videos in double speed... so you can get through my rambling at double the speed.

LET ME AT IT!

You're eager! A link to a live version is available here: https://work-from.netlify.app/, though perhaps you'd like to finish reading this readme first? Or don't, I'm not your boss.

How did you build Work from?

This project was created using NextJS with Supabase Auth, Storage and Database. It also utilises libraries including (but not limited to) Framer Motion, easy-peasy, styled-components and recharts.

How does Work From use Supabase?

As stated above, this project uses quite a few features of Supabase. It uses Auth to allow users to both sign-up and login using either an email address, Google account or Apple account. It uses Supabase's databases to store all data, and uses storage to store avatars for companies.

How can I run Work From on my local machine

To run the project, all you need to do is download the project to your local machine, followed by running npm i to install the required packages, and then npm run-script dev to boot it up. Please note: an .env.local file is required in the following structure to run locally:

PUBLIC_SUPABASE_URL=[your_url]
PUBLIC_SUPABASE_ANON_KEY=[your_key]
BASE_DOMAIN=http://localhost:3000/

For your convencience, you can use this handy Netlify site to view the project live instead. Nifty, huh? https://work-from.netlify.app/

Alternatively, feel free to reach out to me via email ([email protected]), and I'd be happy to provide you with the required keys to hook it up to the existing database, plus my banking details should you have any large sums of money from a recently deceased distant relative I've never heard of.

It isn't finished?!

No 😔

Like all great visionaries, I bit off more than I could chew. I do plan to keep working on it though...

Who was Work From created by?

  • Designed by: Josh Cawthorne
  • Branded by: Josh Cawthorne
  • Developed by: Josh Cawthorne
  • Readme by: Josh Cawthorne
  • Credits writen by: Josh Cawthorne

We're a good team. Very in sync.

Github: https://github.com/joshcawthorne/ Twitter: https://twitter.com/cawthornejosh

You might also like...

This project is a Vegan recipe application. I created with React Native. Check out VeganRecipe now for recipe app

This project is a Vegan recipe application. I created with React Native. Check out VeganRecipe now for recipe app

VeganRecipe 🍆 🍄 🍠 🍅 Hello! This project is a Vegan recipe application. I created with React Native. Check out VeganRecipe now for recipe app. 🍆 ?

Mar 27, 2022

A simple Todo-List app created using React

A simple Todo-List app created using React

TodoLst-UsingReact This is a simple Todo-List app created using React, it performs operations like, allowing users to input list of todos, edit a todo

Mar 11, 2022

Work in progress: A presentation server for Lisp programs, implemented in Electron

electron-presentation-server mikel evins [email protected] A work in progress: an experimental presentation server for Lisp programs, implemented with E

Feb 26, 2022

Created with StackBlitz ⚡️

React Pagination This project supports two kinds of APIs usePagination A custom hook that returns you the pagination data which can then be used to cr

Jan 3, 2023

Tutorial created in collaboration with Enyel Sequeira, taught by JavaScript Mastery.

Tutorial created in collaboration with Enyel Sequeira, taught by JavaScript Mastery.

Travel Advisor Live Site Introduction Build and Deploy an advanced Travel Companion Application using Google Maps. With Geolocation, Google Maps API,

Jan 3, 2023

A chat application created using React,js and Chat Engine

⭐️ Chat-App ⭐️ A Chat Application created using React.js and Chat Engine Live Site Getting Started with Create React App This project was bootstrapped

Dec 15, 2022

A hook based project created during 20-Dec week ReactJS workshop

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 25, 2021

Airbnb-React - In this project, An Airbnb experience page clone is created to learn and implement React props concepts.

Airbnb-React - In this project, An Airbnb experience page clone is created to learn and implement React props concepts.

Create React Airbnb App In this project An airbnb experience page clone is created to learn and implement React props concepts. Objectives Learn about

Jun 28, 2022

Hacker-news-with-react - 👾 Consuming the hacker news api, i created a more modern design for than the current site.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2022
Comments
  • Page reload back to back after complete registration

    Page reload back to back after complete registration

    I am using Firefox in Ubuntu. I open the web in private window and complete the registration and fill all the on-boarding details as well. Then it takes me to the dashboard page. But after some times my page is reload back to back. I am also adding a one more issue Validation Issue in Full Name

    • If user enter his first name and give a space then it is allowing me to proceed
    • You can also give space before your first name and it is allowing me to proceed

    Screenshot from 2021-08-11 12-06-34

    opened by Starboy-Sharma 7
  • When I login I get this error message in alert: invalid input syntax for type bigint:

    When I login I get this error message in alert: invalid input syntax for type bigint: "null"

    I am using firefox browser. First I am trying to login but after take my username it is not proceeding. After some time when I refresh the web page. I found this issue Screenshot from 2021-08-10 20-17-28

    opened by Starboy-Sharma 4
  • Can't continue after signing up

    Can't continue after signing up

    Hi @joshcawthorne, that's an awesome project! I wanted to try it out and encountered an issue. After clicking on the magic link to sign up, I get a form to give my name. That's fine but then the animation runs and I only have an empty box at the center of the screen. image Here are what I got on the devtools: image image I'm using Mozilla Firefox developer edition on Windows 10.

    opened by florian-lefebvre 4
  • Sidebar buttons don't do anything

    Sidebar buttons don't do anything

    Right now, I'm on the dashboard home page and I can't navigate to another part (even the user settings). Clicking on the sidebar buttons fires the animation and the active state but nothing else is happening in the app. I don't have any errors in the console. I'm using Firefox on Windows

    opened by florian-lefebvre 0
Owner
Josh Cawthorne
[object Object]
Josh Cawthorne
During work. Second team project created during CodersCamp 2021/2022 by a 6-person team.

BoardMap Status: Work in progress. Work on the project started on 10-01-2021. Our Crew Mentor: Piotr Rynio Agnieszka Przybyłowska Patryk Święcicki Rad

Piotr Rynio 3 Mar 21, 2022
Aplicativo mobile desenvolvido para o FF-Hackathon.

✔️ AllTo - FF Hacka | Shawee ✔️ FF Hacka | Project | Technologies | How to use | License ℹ️ What's FF Hacka? Hackatons são eventos que envolvem tecnol

Thiago Mata 2 Jun 17, 2022
Boilerplate for a NextJS and Supabase Project. Including full authentication with sign up, login and password recovery.

NextJS x Supabase Boilerplate Getting Started Environment variables Create the enviroment variables with the following command cp .env.local.dist .env

Dominik Amrugiewicz 9 Jun 13, 2022
Next.js + Prisma + Supabase simple Blog example

Next.js + Prisma + Supabase Blog Project About the Project Prisma connects the PostgreSQL Database provided by Supabase by using postgres connection s

Soham Shah 4 Nov 19, 2022
cms for next.js based on supabase for developers.

one cms for next.js based on supabase for developers. disclaimer one is in early and active development and currently not functional. all the @one pac

Jonas Wanner 6 Aug 27, 2022
A collection of framework specific Auth utilities for working with Supabase.

A collection of framework specific Auth utilities for working with Supabase.

Supabase Community 507 Jan 2, 2023
Tamagui with Supabase, Expo, Next.js, Solito and Jotai

Tamagui + Supabase + Solito + Next + Expo Monorepo ⚡️ Instant clone & deploy ?? About This monorepo is a starter todo app, built using Supabase + Expo

Lachlan Hawthorne 15 Dec 12, 2022
This app simulates a simple bookstore, and it was created using ReactJS and Redux.

Bookstore About The Bookstore is a website similar to the "Awesome Books" website built in the previous Microverse module (see live version). My goal

Enio N. de Souza 6 Oct 3, 2021
This is a movie app project using imdb database created by nextjs and tailwind css.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Sahand Ghavidel 1 Dec 24, 2021
This is a movie app created by next.js and tailwind css using imdb database.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Sahand Ghavidel 1 Dec 26, 2021