Altruistic F/LOSS marketplace for goods & services and needs (using Chakra-UI, React, MeteorJS).
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
- 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
meteor npm installmeteormeteor resetmeteor deploy <select a subdomain>.meteorapp.com --free --mongo- 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
- Extend users collection
- react-meteor-data
- percolate:migrations
- force-ssl
- mdg:seo
- aldeed:collection2
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.
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 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.
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:
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
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.
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.
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
