Forem: CodeWithArif

QUIZER

CodeWithArif — Mon, 21 Mar 2022 17:51:44 +0000

A premium quality open-source discord bot specially crafted for hosting and managing quizes autometically and punctually.

Check GitHub

Screenshots

Here are some screenshots of QUIZER Bot.

Installation

Clone this repository or download the zip and unzip.
Then install all the necessory packages using the commands in the terminal.

yarn install

Then to run the project run this command.

yarn dev

The production build of the frontend is already there in the public folder.
But you can change all the code freely.

The project is ready to host online.

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

MONGO_URI=<YOUR_MONGODB_URI>
DISCORD_TOKEN=<YOUR_DISCORD_TOKEN>
CLIENT_ID=<YOUR_CLIENT_ID>
CLIENT_SECRET=<YOUR_CLIENT_SECRET>
REDIRECT_URL=<YOUR_REDIRECT_URL>

GUILD_ID=<THE_SERVER_GUILD_ID>
QUIZ_MORDERATOR_ID=<ID_OF_THE_QUIZ_MORDERATOR_ROLE>
QUIZ_LOG_CHANNEL_ID=<THE_ID_OF_THE_CHANNEL_WHERE_ALL_THE_QUIZ_WILL_B_LOGGED>

MONGO_URI Provide the mongo db url. This Quizer bot will store all the quizes in this database. You can also provide mongodb atlas uri.
DISCORD_TOKEN Create a discord bot. then copy the Bot Token here to allow the bot to login. You have to add the bot to your server and provide it the Administrator Role.
CLIENT_ID Provide the Client id of your bot
CLIENT_SECRET Provade the Client Secret of your bot
REDIRECT_URL Provide the Redirect Url of your bot. This is the same url of your app.
GUILD_ID Provide the Guild/Server id.
QUIZ_MORDERATOR_ID Provide the id of the role who can host or manage the quizes.
QUIZ_LOG_CHANNEL_ID Provide the id of the channel where all the Quizes will be logged. Hide this from all other members. The quistions along with the answers, update log, delition log will appear here.

How to get DISCORD_TOKEN, CLIENT_ID, CLIENT_SECRET, GUILD_ID, QUIZ_MORDERATOR_ID and QUIZ_LOG_CHANNEL_ID

To use the QUIZER, you have to create a discord bot.

Goto https://discord.com/developers/applications.
Create a new application.
After creating, go to Bot on the left pannel , then click the Reset Token and copy the new Token. This is your DISCORD_TOKEN.
Now goto OAuth2 on the left pannel, then copy the CLIENT_ID and CLIENT_SECRET.
Now add an redirect url. This is the url where your frontend site is hosted. If localhost then http://localhost:3000.
Now for other three env variables, you have to be in the devloper mode.
Then right click on your server and copy id. Goto Roles and copy the id of the required role. Then copy the channels id.

Put all the Variables at .env file properly. And you are done.

Authors

@CodeWithArif

@WEVER - the modern technology to built incredible User Interfaces

CodeWithArif — Tue, 08 Mar 2022 01:52:03 +0000

@WEVER JS is a node js framework and at the same time a beautiful technology to built incredible user interface in the web. It is fully customizable, flexible, declarative, component-based JavaScript framework & library to build complex and incredible UI (User Interface). This technology is an advance technology and at the same time a beginner friendly technology. This framework works on virtual dom, like react and others. Here we also use JSX (Javascript XML) toale the development declarative.

XEON JS

The main library of @WEVER is XEON JS. It's nothing but a lightweight javascript library. Here we have multiple functions to help developers to create their dream projects. The most useful function is xeon.XSET();.

1. createElement()
xeon.createElement(); function is used to create document node. This is functionally simple but working complex. This can create 5 types of namespace element including HTML and SVG.
/*
 * @param {String|Function} tag - tha name of the element or a function if component.
 * @param {Objects} attributes - Key value pairs of attributes
 * @param {Array} children - list of children.
 * @param {HTMLElement} parent - the parent element of the element, if exist.
 */
createElement(tag: String|Function, attributes: Object, children: Array, parent: HTMLElement);

To be continued...

Precautions & Rules You Must Follow in Your ME(R/A)N Project...

CodeWithArif — Mon, 07 Mar 2022 13:51:08 +0000

If you are reading this blog, then you must be a MERN or MEAN developer, and now you want to increase you website's productivity or may want gather more skills. I am not much skillful person though. But, here are some tips & tricks that I use in my work and this may also help you.

Backend

First let's talk about the backend. Here we are using Express JS in Node JS (MERN/MEAN). There we already have tons of middleware to use.

1) Don't make any your APIs routs in GET method.
It is the best practices to make all your routs in any methods rather than GET. Whenever you will publish your application for production, you will have to put your frontend codes in your server. This will require GET method will all selectors. So if your api path and frontend path is same and your api in GET method, then you won't get your frontend. You will receive the data that the api provides.
// main.js
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
// Add an api
app.get("/getTodo", (req, res) => {
    // Your logic
});
// Surve frontend
app.get("*", (req, res) => {
    res.sendFile("./build/index.html");
});
// This won't be surved for /getTodo
// Start server
server.listen(process.env.PORT || 5000, err => {
    if (err) throw new Error(err);
    console.log("Server is started...");
});
2) Always try to write your backend code in multiple files and connect them together with express.router()
On breaking your code into several files makes you project management easier. To devide the APIs there is an inbuilt function in express called router.
// main.js
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
// Let's add server.
express.use("/api", require("./api"));
// Start server
server.listen(process.env.PORT || 5000, err => {
    if (err) throw new Error(err);
    console.log("Server is started...");
});
Setup routes...
// api.js
const express = require("express");
const Router = express.router();
// Add all APIs as shown bellow
// /api/getTodo
Router.post("/getTodo", (req, res) => {
    // Logics
});
// Export the router
module.exports = Router;
3) Don't keep any error or warnings to resolve later.

A very bad way of coding is to keep all your warnings even sometimes runtime errors to fix later. When you will move forward, you can realise that your code is messing up, and so soon it will be impossible to continue your project. So, whenever you see an error or warnings, fix that first and then move to other features.

4) Make all your APIs first, then implement bit to the frontend.

If you creates all your APIs first according to your project, it becomes more easier to manage your project. To built APIs calls or to test it, you can use Postman(Software) or ThunderClient(VS Code Extension). From here you can manage all your APIs easily.

5) Access your database visually.

To manage or check your database, it's well to check it visually. If you are working on MongoDB Atlas, you can directly view all your collections and entries from the web. Else, if you are using MongoDB in local system, then install an application called MongoDB Compass. It is officially launched by MongoDB.

6) Use environment variables to store your secrets.

Generously our MERN or MEAN app contains a bunch of secret keys which we don't want to share with anybody. Those secrets might be your MongoDB URI, some open source api keys, secret value for JSON Web Token etc. So, to store those keys, we use environment variables inside an .env file. You can access those keys directly in your Express Server using dotenv package.

Frontend

Now let's come to Frontend part. Here we will cover only about React JS as it has more developers than Angular. And we have to choose one for now.

1) Simple App

Try making your app as simple as you can. Don't make tons of unorganized components. This will generally mesh up your app.

2) Modules

In any type of Web app, we use some modules from npm, or some we create by self. The modules created by self, should be stored in a seperate file in a different location like modules/*. Therefore you can access them from anywhere you want.

3) Module CSS
In react js we used to get css simply using-
import "./style.css";
But in this case, we can't create styles with same class again. If we do so, we will mixed up those classes. React actually works on webpack, and importing styles is a feature of webpack. While importing them, webpack usually bundles them and put then in html together. So, your styles Frome different sources, used to mix together.
To get rid of this, now we have module css. This usually converts css into modules. So, that we can easily use same classes over react app.
import style from "./style.module.css";
Here we need to add a sub-extension to the css file called "module". Thus it converts into a module css. Importing this, returns an object with the keys with value of the actual classes and the values with the value of new partially randomly generated class. Thus each classes stays indifferent from each other.
import style from "./style.module.css";
// Return jsx
function App() {
    return (
        <h1 className={style.heading}>Hello World</h1>
    );
}
4) Avoid using CSS class based framework or library.

Try avoiding CSS frameworks like Tailwind or Bootstrap. Those are really good, but sometime it becomes harder to understand jsx code with tons of classes.

To be continue...

How to create react app on Android devices.

CodeWithArif — Sat, 05 Mar 2022 08:29:13 +0000

React is a wonderful technology in web development category. It is basically a javascript library which is used in multiple react based framework like create-react-app or Next app. But the problem arouses when it comes to device preferences. Create-react-app requires symlink or symbolic links to be enabled on the device. That's why we needs a perfect device. It doesn't work on any virtual devices or kernels. Many beginners faced this problem, who doesn't have any laptop or PC. But now you can also run react app directly from your device.

To create a react app, we will need a custom Linux kernel, because we can't use node cli commands on Android without root. So, we will use an application known as Termux. You can find it from play-store. But it is deprecated now. So, download it from f-droid. 🔗 Link. After downloading, open it and give it required time to initialise. Then run the following commands.

apt update && apt upgrade

This command will update all of the application dependencies. Then we have to install node js.

Pkg install nodejs-lts

This will install the lifetime supported version of node js. A package manager called NPM and NPX automatically comes with node. Now we will create our first react app from Android.

Using localstorage system in termux allows you to access all the files of your device storage and sd-card. But this requires symlink or symbolic links. So, we will create our app inside termux virtual storage.

npx create-react-app <your_app_name>

This process will take a few moment and then you will find your react app ready. All the necessary tools required in developing a react app are all here.

Now to edit the files, we will use an application called Acode-editor. Get it on play-store. And follow the rules.

All done.
Happy hacking...

Forem: CodeWithArif

QUIZER

Screenshots

Installation

Environment Variables

How to get DISCORD_TOKEN, CLIENT_ID, CLIENT_SECRET, GUILD_ID, QUIZ_MORDERATOR_ID and QUIZ_LOG_CHANNEL_ID

Authors

@WEVER - the modern technology to built incredible User Interfaces

XEON JS

1. createElement()

To be continued...

Precautions & Rules You Must Follow in Your ME(R/A)N Project...

Backend

1) Don't make any your APIs routs in GET method.

2) Always try to write your backend code in multiple files and connect them together with express.router()

3) Don't keep any error or warnings to resolve later.

4) Make all your APIs first, then implement bit to the frontend.

5) Access your database visually.

6) Use environment variables to store your secrets.

Frontend

1) Simple App

2) Modules

3) Module CSS

4) Avoid using CSS class based framework or library.

To be continue...

How to create react app on Android devices.

2) Always try to write your backend code in multiple files and connect them together with `express.router()`