DEV Community

Cover image for Hydrogen - A social media web app powered by SolidJS and NodeJS
Harsh Mangalam
Harsh Mangalam

Posted on

Hydrogen - A social media web app powered by SolidJS and NodeJS

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.

LIVE Demo
Video Demo

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);


Enter fullscreen mode Exit fullscreen mode

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>
...
...



Enter fullscreen mode Exit fullscreen mode

Use like this



const myState = useMyState()
...
...
<div>{myState.someStoreFields}</div>
...
...



Enter fullscreen mode Exit fullscreen mode

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,
};


Enter fullscreen mode Exit fullscreen mode

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: [],
};



Enter fullscreen mode Exit fullscreen mode

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

GitHub logo harshmangalam / hydrogen-solidjs-client

A social media web app powered by SolidJS


Hydrogen - Social Media Web App (Powered by SolidJs)

Welcome to Hydrogen, a feature-rich social media web app built with SolidJs. Explore a vast array of functionalities including real-time notifications, dynamic posts, group management, and more.

image

Table of Contents

  1. Installation
  2. Setup .env File
  3. Server Repo
  4. Dependencies
  5. Key Features
  6. Utilities
  7. Services
  8. Context for State Management
  9. Date and Time Formatting
  10. Real-time Friend Status

Installation

Follow these steps to install the project:

Install pnpm globally

npm i -g pnpm
Enter fullscreen mode Exit fullscreen mode

Install dependencies

pnpm i
Enter fullscreen mode Exit fullscreen mode

Run the development server

pnpm run dev
Enter fullscreen mode Exit fullscreen mode

Setup .env File

  1. Create a new file named .env in the root directory of your project.
  2. Copy the contents of the .env.example file into the .env file.
  3. Replace the placeholder values with your actual credentials.

Here's an example of what your .env file might look like:

VITE_ENDPOINT=
VITE_CLOUDINARY_UPLOAD_PRESET=
VITE_CLOUDINARY_API_KEY=

Backend Github repo

GitHub logo 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 pnpm i
  • create database and tables pnpx prisma db push
  • start server pnpm run dev



Top comments (1)

Collapse
 
stevemk42 profile image
Steve

..definitely like what's next, just by reading this. Its simple and clear. Thanx ahead for the next episode !