Hi Developers, I have build a social media web app powered by SolidJS in frontend and NodeJS in backend for Solidhack2022.
This was my amazing experience to build something big with solidjs and contribute to open source.
This will be a series where i will discuss how i created this web app using different different features from solidjs and expressjs.
Libraries and Frameworks used
Frontend
- solid-js
- tailwindcss
- solid-app-router
- platform
- dayjs
- axios
- socket.io-client
- solid-icons
- js-cookie
- shortid
Backend
- express
- @prisma/client
- bcrypt
- socket.io
- jsonwebtoken
- express-validator
- dotenv
- cookie
- cookie-parser
- morgan
- nodemon
- prisma
Features
- Authentication
- Dark and light mode
- Friends
- Posts
- Groups
- Notifications
- Messenger
- Profile
- Settings
- Networking
- Geolocation
- Login History
- much more...
Solidjs Context
In this project i have used Solidjs Context for global state management. Context helps to pass signal and store reactive data to nested components without relaying on props drilling.
You can easily create context and use in components and pages where needed.
import { createContext,useContext } from "solid-js";
import { createStore } from "solid-js/store";
//context for manage state
const MyContextState = createContext();
//context containing method that will update reactive state data
const MyContextDispatch = createContext();
const initialState = {
// your reactive data initial values comes here...
};
export default function MyProvider(props) {
const [store, setStore] = createStore(initialState);
const myMethod1 = () => {
// update store value using setStore()
};
return (
<MyContextState.Provider value={store}>
<MyContextDispatch.Provider
value={{
myMethod1,
// so on...
}}
>
{props.children}
</MyContextDispatch.Provider>
</MyContextState.Provider>
);
}
export const useMyState = () => useContext(MyContextState);
export const useMyDispatch = () => useContext(MyContextDispatch);
Inside your components you can import useMyState
and useMyDispatch
Do not destructure reactive data
Do NOT use like this
const {someStoreFields} = useMyState()
...
...
<div>{someStoreFields}</div>
...
...
Use like this
const myState = useMyState()
...
...
<div>{myState.someStoreFields}</div>
...
...
Solidjs reactivity are based on ES6 Proxy
I have created 4 context
Auth context
Auth context keeps reactive data related to authentication, user details and account. It also manage socket instance when someone successfully authenticated.
My Auth context initial state looks like this
const initialState = {
isAuthenticated: false,
isLoading: true,
currentUser: null,
currentAccount: null,
socket: null,
manager: null,
};
socket and manage
keeps socket.io client related data.
onMount i fetch current user data using jwt token . If it success then i update store data otherwise i redirect to login screen.
Notification context
Notification context track notifications count and data . It use socket.io client to fetch realtime notification from server and update store. After that Notification component at Navbar update notification count and data.
My Notification context initial data looks like this
const initialState = {
count: 0,
notifications: [],
};
UI Context
Ui context keeps track of ui related data like snackbars.
Messenger context
Messenger context keeps track of friends and active chat related data.
Do not make context global when it is not required
I have only those context in global which is required. For example i added auth , notification and ui context global but messenger context is only needed by my messenger route and hence i only scoped messenger context inside messenger route. In this way we can add less weight on top of page.
In my next post i will write about how i used hooks in my application.
Frontend Github repo
harshmangalam
/
hydrogen-solidjs-client
A social media web app powered by SolidJS
Hydrogen - Social media web app (Powered by SolidJs)
Installation
- install pnpm globally
npm i -g pnpm
- install dependencies
pnpm i
- run dev server
pnpm run dev
Setup env file
- copy
.env.example
inside.env
Update .env
VITE_ENDPOINT=https://hydrogen-harsh.herokuapp.com/api
Site deployed url
https://hydrogen-solid.vercel.app/
CONTRIBUTE TO DASHBOARD
Dashboard deployed url
https://hydrogen-dashboard.netlify.app/
Dependencies
- Tailwind form
- Tailwind css
- Axios
- Dayjs
- Js cookies
- Platform
- Shortid
- Socket io client
- Solid app router
- Solid icons
- Solidjs
80+ Components
25+ hooks
50+ Screens
Dark and light mode
Authentication
- Login
- Signup
Home
- Navigation
- Posts feeds
- My friends
Friends
- My friends
- Requests received
- Requests sent
- Friends Suggestions
- Send friend request
- Receive friend request
- Decline friend request
- Accept friend request
- Cancel sent request
Posts
- My posts
- Trending Posts
- Friends Posts
- Create Post
- Post content
- Post privacy
- Add specific friend who will see the post
- Tag friend
- Add Images
- Add feelings
- Add locations
- Add and remove heart on post
- Comment onβ¦
Backend Github repo
harshmangalam
/
hydrogen-nodejs-server
A social media backend api powered by Nodejs and Prisma
Hydrogen - Social media REST API (Powered by Nodejs)
Installation
- create .env
- copy
.env.example
inside.env
- setup postgresql and update
DATABASE_URL
inside.env
- install dependencies
npm i
- create database and tables
npx prisma db push
- start server
npm run dev
Top comments (1)
..definitely like what's next, just by reading this. Its simple and clear. Thanx ahead for the next episode !