https://github.com/pkunv/thoughtsy
React.js social web app with the main goal of allowing users to share their best words of wisdom.
https://github.com/pkunv/thoughtsy
material-ui material-ui-react react-hook-form react-router react-router-dom reactjs supabase-js typescript typescript-react vitejs vitest
Last synced: 8 days ago
JSON representation
React.js social web app with the main goal of allowing users to share their best words of wisdom.
- Host: GitHub
- URL: https://github.com/pkunv/thoughtsy
- Owner: pkunv
- Created: 2023-11-18T09:19:19.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-13T19:17:27.000Z (about 2 years ago)
- Last Synced: 2025-02-20T09:16:48.843Z (12 months ago)
- Topics: material-ui, material-ui-react, react-hook-form, react-router, react-router-dom, reactjs, supabase-js, typescript, typescript-react, vitejs, vitest
- Language: TypeScript
- Homepage:
- Size: 521 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Thoughtsy
Simple CRUD SPA social media web app that allows users to share their words of wisdom with others.\
Created with React 18, React Router 6.4, React Hook Form 7.4 and Material UI 5.\
Testing environment includes Vitest + React Testing Library.\
Used libraries and dependencies are React 18.2, React Router 6.4, React Hook Form 7.4 and Material UI 5.\
Supabase was used as back-end (_using not a local environment though! that's something to consider in the future for development purposes_)
## Available functionality
1. Handling user log in, log out and post fetching
2. Registration with email verification
## Instalation and configuration
1. Create your [Supabase account](https://supabase.com/dashboard/sign-up) and create a new project.
2. Go to SQL Editor and set up tables as follows:
```sql
create table
public.users (
uid uuid not null,
"displayName" character varying null,
"createdAt" timestamp without time zone null default (now() at time zone 'utc'::text),
constraint users_pkey primary key (uid)
) tablespace pg_default;
create table
public.posts (
id bigint generated by default as identity,
content character varying null,
type character varying null,
source character varying null,
uid uuid null,
"createdAt" timestamp with time zone not null default now(),
active boolean null default true,
constraint thoughts_pkey primary key (id),
constraint posts_id_key unique (id),
constraint posts_uid_fkey foreign key (uid) references users (uid)
) tablespace pg_default;
create table
public.users (
uid uuid not null,
"displayName" character varying null,
"createdAt" timestamp without time zone null default (now() at time zone 'utc'::text),
constraint users_pkey primary key (uid)
) tablespace pg_default;
```
3. In your project, go to SQL Editor once again and paste these policies and triggers for table interactions:
```sql
create policy "Profiles are viewable by everyone."
on users for select
using ( true );
create policy "Users can insert their own profile."
on users for insert
with check ( auth.uid() = id );
create policy "Users can update own profile."
on users for update
using ( auth.uid() = id );
create policy "Posts are viewable by everyone."
on posts for select
using ( true );
create policy "Post likes are viewable by everyone."
on postLikes for select
using ( true );
create policy "Users can update only their own posts."
on posts for update
using ( auth.uid() = uid );
```
```sql
create or replace function public.handle_new_user()
returns trigger as $$
begin
insert into public.users (uid)
values (new.id);
return new;
end;
$$ language plpgsql security definer;
create or replace trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();
```
4. Create a test user for tests assertion (Authentication section in Supabase)
5. Fork repo
6. Execute `npm i` to install dependencies
7. Copy Supabase API keys which you can find in Settings section and API tab, then create `.env` file with these variables:
```
VITE_SUPABASE_KEY=supabase_key_here
VITE_SUPABASE_SITE=supabase_site_here
VITE_SUPABASE_TEST_EMAIL=test@user.com
VITE_SUPABASE_TEST_PASSWORD=123456
VITE_TEST_SIGN_UP=0
VITE_SUPABASE_SIGNUP_EMAIL=actual@email.com
VITE_SUPABASE_SIGNUP_DISPLAY_NAME=signUpTestUser
VITE_SUPABASE_SIGNUP_PASSWORD=123456
```
8. Execute `npm run test` to start tests to check all functionality.
> Please note that while testing sign up Supabase sends a standard verification e-mail.
> You should turn that off in Authentication section -> Providers -> Email -> Confirm email
> To disable or enable sign up integration test you can change `VITE_TEST_SIGN_UP` to _0_ or _1_
## Useful documentations
### [React Router Docs](https://reactrouter.com/en/main/start/tutorial)
### [Material UI](https://mui.com/material-ui/getting-started/learn/)
### [React Hook Form](https://react-hook-form.com/get-started#Quickstart)
### [React Testing Library](https://testing-library.com/docs/queries/about)
### [React Testing Guide - Aria roles cheatsheet](https://components.guide/react+typescript/testing)