Hey 👋
Samjhana is a web platform that helps to turn unsolved wishes into reality. Watch the video to go through a quick overview of the idea.
You are one website away from your wish to turn into reality.
Project introduction
Samjhana (memory in English) is a website and MIT license open source project where you write your last wishes. No, you don't need to be in serious condition or in your last stage of life 😟. You can still use the platform if you're totally normal. Here on this website, you can post your simple wish that you want to fulfill in your life or if you're not capable to accomplish it, there is always someone who can do that. And they can do it if they find your wish. So post now.
In general, you can post your wish, read others' wish and even generate a custom sympathy card and download it. Even feel free to express your sympathy with the help of a built-in Markdown editor.
Inspiration, idea, and problem 🤷♀️
Even though it happens one in million times but I suddenly got this idea while brainstorming through some problems. And I didn't find a dedicated website with decent UI. All I found was the social media, it's like a garbage ban where everyone posts anything. I thought I can actually make a web platform just to do that. And voila, it is here.
Demo of the website
Homepage
You won't find anything here except the general introduction. The real magic happens when you log into the website.
Feed page
When you've successfully logged in, you will find a page (let me call it as feed) where you will find all the wishes and posts. And there will be a featured post that uses a very complex algorithm to find the very recent post 🤣.
New post page
You can use this page to create a new post. It doesn't matter if you are using it to write your last wish or sympathy. Just write something, highly recommended not to post anything irrelevant or controversial topics.
Your posts page
Here you find all your posts and you can delete or edit your posts in a matter of seconds.
Generate card page
Here you can generate a custom sympathy card and download it in png format. The simple and customizable design of the card will be getting updated frequently.
Feedback page
Here you can give feedback and report issues related to the website. And the form on this page makes use of netlify forms and its security measures to receive feedback.
Other pages
You get a separate page for each post with a markdown preview. And a simple 404 page if the page doesn't exist 🤙. Also, you can find terms and conditions and privacy policy pages to get a detailed picture of the website.
Video overview
How did I build it
Initially, I thought of using a whole new tech stack which I haven't used till now. But suddenly my exam routine hits on my face. Then I thought of using React as my frontend and firebase as my backend. Although firebase was new for me, I used it ☺. And I want to give you a quick overview of the building process.
Tech stack 👩💻
- Reactjs -> For frontend
- Firebase -> For realtime database, authentication and storage
- Netlify -> Deployment and feedback form submission
- Material-ui -> Building UI components with React
Process 🤔
No, it's not a whole tutorial here on how to make the whole website. Better you can think of it as a general idea and steps:
1. 🔐 Authentication (Login/logout):
Firebase made it really easy to authenticate users to the platform. This is a configuration file.
import firebase from "firebase/compat/app";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
export const storage = getStorage(firebaseApp);
export default firebase
2. 📝 CRUD operation:
Next, to perform read, write and create a new post, I used the firebase realtime database which is surprisingly fast.
3. ⬆ Image upload:
I used firebase storage to host images for the posts. And used really user-friendly interface to upload posts cover images.
4. 💁♂️ Feedback page:
Form submissions using netlify forms without reloading the page were tricky and took some time for me to figure out. But hey, netlify is more than a platform that hosts your site.
5. 🌐PWA
Samjhana is a Progressive Web App, meaning that it can work offline and can be installed, and you can access it by clicking on the icon.
Deployment
I have been using netlify since I know we can host websites. And netlify is powering most of my other projects. So netlify is a go-to platform for me to host the website. And yes I deployed my app with the help of netlify.
Challenges I faced 💪
- Of course, the first one is my exam 😢
- Using firebase (I was just starting out if you are laughing out on me😃)
- Netlify form submission without reloading
- And I was in the situation to feel I don't know anything, every day
Functions ⚒
Oh, we haven't discussed much on the functions of the website 😅. At the surface it has the following functions:
- Generate a card (very easy to generate a little simple card)
- Write down your last wish, or simply your wish, and the reason why you are not able to fulfill it
- Read others' wishes and try to fulfill them if possible
- Write a public love message and why he/she was important in your life and share it with others.
No, this site is not trying to be the next Facebook or Instagram. Here your privacy is respected and your data is secured.
💡 What did I learn?
I have made a few React projects in the past but even though the site seems like just a small version of social media, there were a lot of googling, frustrating moments, and bugs without errors. But I surfacely summarize my outcomes here as follows:
- Using Firebase: From complete beginner to being able to use firebase as backend as a service.
- Netlify forms: I learn to do asynchronous form submissions to netlify with react.
- Licencing the project: This is my first time licensing my project under the MIT license.
Future plans 🔮
- Create a sympathy card with a templates
- Help one to collect funds to complete someone's awesome but incomplete dream
- Make the post an NFT and list it in the marketplace
Important links 🔗
- Github repo
- Website
- Website terms and conditions and privacy-policy
- Feedback page
Connect with me on Twitter @aashishpanthi11.
