Skip to content
/ altrueco Public template
forked from fredmaiaarantes/simpletasks

Altruistic F/LOSS marketplace for goods & services and needs (using Chakra-UI, React, MeteorJS).

Notifications You must be signed in to change notification settings

eapo/altrueco

 
 

Repository files navigation

The Altruistic F/LOSS Marketplace

Altruistic F/LOSS marketplace for goods & services and needs (using Chakra-UI, React, MeteorJS).

What and why this stack?

The main goal is to make development as quick and efficient as possible. To achieve this have selected these technologies:

  • Meteor - Fullstack Framework focused on productivity that uses RPCs and Sockets for reactivity
  • React - Minimal UI Library for building on the web
  • Chakra UI - React library focused on simplicity and productivity
  • Formik - Most used Form lib for React focuses on making easier-to-write forms
  • MongoDB - NoSQL and really powerful for prototyping and creating ready-to-use apps out of the box
  • Meteor Cloud - Cloud provider that makes Deploying a Server with, Database included painless
  • fredmaiaarantes/simpletasks

Demo: https://altru.eu.meteorapp.com

Features

  • Sign In / Sign Up
  • Listings by logged user
  • Add Listing
  • Remove Listing
  • Mark Listing as Resolved
  • Filter Listing by Status
  • Add Listing Description[str.md]
  • Add Listing Tags[str.autload]
  • Add Listing Type[goods,service,needs]
  • Add Listing Offer[currency[USD,EUR,HUF,RON,BTC,DOGE,BCH,ETH,LTC,HIVE,HBD,VLT,XMR,DASH], exchange[true,altruism_score], love[altruism_score], zone[int]]
  • Add Listing Term[inception,expiration]
  • Filter Listing by Type[goods,service,needs] ("is:goods|service&needs")
  • Filter Listing by Term[after|before|older|newer|newer_than|older_than] ("after:YYYY/MM/DD newer_than:2d")
  • Filter Listing by Tags[str] ("has:new" OR "#new")
  • Search[str[Name,Description,Tags]]
  • User Profiles
  • User Relations
  • User Relation Map Zones
  • Marketplace of Listings
  • Payment Processors
  • API

Vision: https://pixeldrain.com/u/HWtH1eWg

Running the template

Install dependencies

meteor npm install

Running

meteor

Cleaning up you local db

meteor reset

Deploy to Galaxy with free MongoDB

meteor deploy <select a subdomain>.meteorapp.com --free --mongo

Done

  • Integrate to Chakra-UI
  • Use ESLint, Prettier, and Husky
  • Host in Galaxy
  • Meteor APM monitoring
  • Use React Router 6 and Lazy Loading
  • Use Formik and yup
  • Galaxy SEO Support
  • Define directory structure
  • Add database migrations

To Do

  • Extend users collection

Main Meteor packages

  • react-meteor-data
  • percolate:migrations
  • force-ssl
  • mdg:seo
  • aldeed:collection2

Tech Explanation

Backend decisions

In this template, we have chosen to use Mongo, shipped out of the box with MeteorJS, and added some packages to make it even more productive. That being said, we decided to use simpl-schema andpercolate:migrations, the first one for validating schemas in run-time and the second for creating database migrations.

Database Migrations

Questions on how to strcuture your migrations ?

Use api/db/migration.js as your reference


This is the kind of feature that sometimes comes in handy. Whenever the server starts, it runs the code below that is located in api/main.js:

import { Meteor } from "meteor/meteor";
import { Migrations } from "meteor/percolate:migrations";
import "./db/migrations";
import "./tasks/tasks.methods";
import "./tasks/tasks.publications";

/**
 * This is the server-side entry point
 */
Meteor.startup(() => {
  Migrations.migrateTo("latest");
});

It gathers all migrations that have not been applied and applies them.

A great use for migrations is when you have a change in your database, and you could need everyone to have at least the default data.

For more details, you can check the package docs.

Schemas

Schemas are a manner to be sure that the data that comes from the front end is the way we expect it to be and also it is sanitized.

We have decided to use simpl-schema attaching it to our collection as you can see in api/tasks/tasks.collection.js by doing this, all data that goes to our Database is validated and follow the structure we defined, you can see how a Task is structured, and having that schema, we can start doing methods and publications.

Don't forget to check simpl-schema docs in case of doubts on how to use it.

Server Connection

Following the idea of having a folder for each feature and if it connects to the front end, we need to provide a way to connect.

Meteor works similarly to tRPC and Blitz.js. This model has server functions that get called through a Remote Procedure Call (RPC). In this template, calls that are related to tasks are in the api/tasks/tasks.methods.js folder.

/**
 * Remove a task.
 * @param {{ taskId: String }}
 * @throws Will throw an error if user is not logged in or is not the task owner.
 */
export const removeTask = ({ taskId }) => {
  checkTaskOwner({ taskId });
  TasksCollection.remove(taskId);
};
...
Meteor.methods({
  insertTask,
  removeTask,
  toggleTaskDone,
});

So in order to call this server method, we need to do a call for its name. It would look like this:

 onDelete={taskId => Meteor.call('removeTask', { taskId })}

This sample comes from ui/tasks/TaskItems.jsx:

Subscriptions

MeteorJS supports subscriptions out of the box that can be seen in api/tasks/tasks.publications.js these publications are called in a similar way to RPC methods, but their values are reactive. For more details on how to deal and think in reactive programming, Andre Stalz has this gist introducing Reactive Programming, and Kris Kowal has this Repo that discusses the theory of reactivity in-depth.

For using subscripiton as you can see in our docs, is similar to using methods. In React we use meteor/react-meteor-data for having a react-way of calling those methods

For a good example of Subscriptions, you can look in ui/tasks/TasksPage.jsx

Frontend decisions

Task Form

React with Meteor is <3

As for our frontend framework, we have chosen React for its productive ecosystem and simplicity. Meteor has a package for querying data using hooks, which makes you think about only bringing solutions to life.

For more information, you can check react-meteor-data repo for more details on using the best of them.

Forms

As one of the key parts of the front end, we have chosen a library to help us deal with this piece. Formik is one of the most expressive ways of writing forms in React, a good template for creating this kind of form is located in ui/tasks/TaskForm.jsx it is also integrated with Meteor by its call method.

Want to know more and how to create many things with Formik? their documentation.

The productivity core: Chakra-UI

Sign in Dark

Sign in Light

For our UI components, we have chosen Chakra UI because of its productivity that matches what Meteor does in the backend creating a lovely flow with an outstanding Developer Experience.

We have included Dark and Light modes. It can be seen those configs in ui/App.jsx

You can see Chakra-UI's full component list on their site

About

Altruistic F/LOSS marketplace for goods & services and needs (using Chakra-UI, React, MeteorJS).

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 95.6%
  • HTML 4.4%