Type-writer is a documenting web application with the support of many modern techniques to make documenting easier and faster. The web application itself contains clean and interactive UI making it easier to navigate. Some of the most promising features include markdown editing, copy pasting of images and resizing, mathematical equation formatting, syntax highlighter for code blocks etc. The application also contains user authentication through login/sign-up feature. Type-writer is also well equipped with version control to keep a track record for all saved versions of a file in the cloud. Users are also given choices in 3 different formats to download their files in local environment (i.e PDF format, text format, code block format).
Type-writer is a documenting web application that supports markdown editing, copy pasting images etc.
Get youtube demo here
This section will work you through how you can get started with the project.
. ├── Backend │ │ │ ├── Controllers │ │ │ ├── Models │ │ │ ├── middlewares │ │ │ ├── Routes │ │ │ ├── Utils │ │ │ └── index.js │ ├── App │ ├── public │ └── src │ ├── components │ │ │ │ │ ├── Assets │ │ │ │ │ ├── Downloading-formats │ │ │ │ │ ├── Primary Sidebar │ │ │ │ │ ├── Side bar routes │ │ │ │ │ ├── resizable │ │ │ │ │ ├── Version-control │ │ │ │ │ ├── Code-block │ │ │ │ │ ├── User │ │ │ │ │ └──sub-components │ │ ├──page-padding │ │ ├──check-boxes │ │ ├──color-picker │ │ └──yping-effect │ │ │ ├── Pages │ │ ├── Main │ │ └──Home-page │ │ │ ├── lib │ │ ├── header │ │ ├── horizontal-ruller.js │ │ ├── lists.js │ │ ├── node-delete.js │ │ ├── paragraph.js │ │ └── text-format.js │ │ │ ├── Renders │ │ ├── Format equation │ │ ├── Code-block │ │ └── image-capture │ │ │ ├── Actions │ │ │ ├── Constants │ │ │ └── Reducers └── README.md
You will need NodeJS, Git and MongoDB installed to run this project locally
node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
If you dont have MongoDB you use MongoDB Atls
- Clone the repo
git clone https://github.com/Abusayid693/Type-writer.git-
Create a file called .env in the Backend directory of your project:
Backend └──- Controllers - Models - .env <-- create it here - .gitignore - index.js - package-lock.json - package.json -
Inside the .env file, add key
DB_CONNECTIONand assign your MongoDB local host or Mongo Atls like this, also addNODE_ENVandJWT_SECRET.
# .env
DB_CONNECTION = "YOUR_DB_LOCAL_HOST"
# eg : mongodb://localhost/typewriter1 or mongodb+srv://"Your username ":" your password "....
JWT_SECRET = "YOUR_JWT_SECRET"
NODE_ENV = developmentWarning: Treat your tokens like passwords and keep them secret. When working with the API, use tokens as environment variables instead of hardcoding them into your programs.
- Starting the server application.
cd Type-writer && cd Backend
npm install
Nodemon index.jsThis will start server on localhost:8000
- Starting the Client application.
cd Type-writer && cd App
npm install
npm startThis will start client app on localhost:3000
For heading user can use prefix "#"
Prefix " # " -- For H1 tags
prefix " ## " -- For H2 tags
prefix " ### " -- For H3 tags
prefix " #### " -- For H4 tags. user must press Space after entering prefix
prefix " - " -- for Unordered Lists elements prefix " Numerical digits " -- for Ordered Lists elements user must press Space after entering prefix
The equation formatting features supports all Algebric, triagnometric and Matrices formatting, following with prefix " $ ".
prefix " --- " -- for Horizontal linesThe coding blocks supports syntaxhighlighter for
javascript code only( will be updated in future versions).
prefix " ''' " -- for syntaxhighlighting editor
Type-writer supports copy pasting images over browsers and resize them accordingly.
- Copy images over internet and paste them.
- Resize them accoring to your need.
Customize background colours,text colours as per your need, the color palette also supports hex codes.
Version Control tracks and manage changes in your typewriter files,it keeps track of every modification to the files in our database hosted on the cloud , So user dont need to hustle over loosing their data. It also allows sharing of files with others for modification keeping the original version safe.
The sidebar contains date and time of saved versions for iterating through different versions of your files
| Whole type-writer contents in pdf formats | |
| Text | Only text contents of the type-writer. |
| Code block | Downloads coding blocks only in .js format |
| Package | Description | version |
|---|---|---|
| axios | Promise based HTTP client for the browser and node.js | 0.21.1 |
| React-redux | A predictable state container for JavaScript applications | 0.21.1 |
| react-equation | Used of displaying equations over webpages | 0.2.1 |
| react-resizable | To make resizable react components | 3.0.4 |
| react-dropdown | React dropdown menu | 1.9.2 |
| react-syntax-highlighter | Used for syntaxhighlighting in coding blocks,texts etc | 11.0.3 |
| react-typed | Typing annimation in react | 1.2.0 |
| file-saver | provides downloadable formats of files | 2.0.5 |
| jsPDF | A library to generate PDFs in JavaScript. | 2.3.1 |
| material-ui | Customized React components | 4.12.2 |
| react-color | color palette | 2.19.3 |
| Package | Description | version |
|---|---|---|
| mongoose | elegant mongodb object modeling for node.js | 5.13.3 |
| morgan | HTTP request logger middleware for node.js | 1.10.0 |
| express | Node.js web application framework for server side scripting | 4.17.1 |
| MongoDB | a NoSQL database | 4.4.3 |
| bcryptjs | A library to help you hash password | 4.4.3 |
| jsonwebtoken | An implementation of JSON Web Tokens | 8.5.1 |