56 |
62 |
83 |
88 |
91 | */}
92 |
93 |
94 | Algorithms
84 | 85 | 86 | 87 | {/*Modal
89 |Data
90 |
2 |
3 | 
4 |
5 |
6 | [](https://github.com/catherinechiu/BanQ)
7 | 
8 | 
9 | 
10 | [](https://github.com/catherinechiu/BanQ)
11 |
12 |
15 |
16 |
17 | ## Table of Contents
18 |
19 | * [About the Project](#about-the-project)
20 | * [Built With](#built-with)
21 | * [Getting Started](#getting-started)
22 |
23 | * [Installation](#installation)
24 | * [Usage](#usage)
25 | * [Roadmap](#roadmap)
26 | * [Contributing](#contributing)
27 | * [License](#license)
28 | * [Contact](#contact)
29 | * [Acknowledgements](#acknowledgements)
30 |
31 |
32 |
33 | ### Built With
34 |
35 | * [React](https://reactjs.org/)
36 | * [React Router](https://reactrouter.com/)
37 | * [Node](https://nodejs.org/en/)
38 | * [Express](https://expressjs.com/)
39 | * [MongoDB](https://www.mongodb.com/)
40 | * [Webpack](https://webpack.js.org/)
41 | * [CodeMirror](https://codemirror.net/)
42 |
43 |
44 |
45 |
46 | ## Getting Started
47 |
48 | Coming soon!
49 |
50 | ### Installation
51 |
52 | 1. Fork the repo
53 | 2. Clone the repo
54 | ```sh
55 | git clone https://github.com/your_username_/BanQ.git
56 | ```
57 | 3. Install NPM packages
58 | ```sh
59 | npm install
60 | ```
61 | 4. npm start
62 | ```JS
63 | npm start
64 | ```
65 |
66 |
67 |
68 |
69 | ## Usage
70 |
71 |
4 |
5 |
6 | [](https://github.com/catherinechiu/BanQ)
7 | 
8 | 
9 | 
10 | [](https://github.com/catherinechiu/BanQ)
11 |
12 | BanQ: An app to crowd-source algorithm solutions in both video explanations and code form.
13 | 14 |
72 | 
73 |
74 |
75 |
76 |
77 | ## Roadmap
78 |
79 | See the [open issues](https://github.com/catherinechiu/BanQ/issues) for a list of proposed features (and known issues).
80 |
81 |
82 |
83 | ## Contributing
84 |
85 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
86 |
87 | 1. Fork the Project
88 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
89 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
90 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
91 | 5. Open a Pull Request
92 |
93 | ## License
94 | Distributed under the MIT License. See `LICENSE` for more information.
95 |
96 | ## Contact
97 |
98 |
102 |
103 |
104 | [contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=flat-square
105 | [contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
106 | [forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=flat-square
107 | [forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
108 | [stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=flat-square
109 | [stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
110 | [issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=flat-square
111 | [issues-url]: https://github.com/othneildrew/Best-README-Template/issues
112 | [license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=flat-square
113 | [license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
114 | [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
115 | [linkedin-url]: https://linkedin.com/in/othneildrew
116 | [product-screenshot]: images/screenshot.png
--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
1 | // import node express framework
2 | const express = require('express');
3 | // init server
4 | const app = express();
5 | // define port
6 | const PORT = 3000;
7 |
8 |
9 | // import path module (included w/ node.js by default)
10 | const path = require('path');
11 |
12 | // import bodyParser
13 | const bodyParser = require('body-parser');
14 |
15 |
16 | const promptController = require('./controllers/promptController');
17 |
18 | // parse req.body
19 | app.use(bodyParser.urlencoded({ extended: true }));
20 | app.use(bodyParser.json());
21 |
22 |
23 |
24 | // Production Mode vs Development Mode: statically serve everything in the build folder on the route '/build
25 | if (process.env.NODE_ENV === 'production') {
26 | app.use('/build', express.static(path.join(__dirname, '../build')));
27 | }
28 |
29 | // ROUTES
30 |
31 | // READ: Get Home Route
32 | // serve index.html on the route '/'
33 | app.get('/', (req, res, next) => {
34 | console.log('Received get request to home route.');
35 | res.status(200).sendFile(path.join(__dirname, '../index.html'))
36 | });
37 |
38 | // app.get('/add', (req, res, next) => {
39 | // console.log('Received get request to add route.');
40 | // res.status(200).sendFile(path.join(__dirname, '../client/components/PostAlgo.jsx'))
41 | // });
42 | //
43 |
44 | app.get('/prompts', promptController.getPrompts, (req, res, next) => {
45 | res.status(200).json(res.locals.algorithms);
46 | })
47 |
48 | // CREATE: POST Algo Prompt Route
49 | app.post('/add', promptController.postPrompt, (req, res, next) => {
50 | res.redirect(200, '/')
51 | });
52 |
53 |
54 | // READ: GET Single Algorithm
55 | app.get('/algorithm/:id', promptController.getSinglePrompt, (req, res, next) => {
56 | res.status(200)
57 | });
58 |
59 | // // READ: GET Edit Form for Single Algorithm
60 | // app.get('/algorithm/edit/:id', (req, res) => {
61 | // Algorithm.findById(req.params.id, (err, algorithmData) => {
62 | // console.log('found ID:', req.params.id);
63 | // // render view file, then pass payload so view can dynamically render using declared variables
64 | // res.render('edit_algorithm', {
65 | // title: algorithmData.title,
66 | // algorithm: algorithmData,
67 | // });
68 | // });
69 | // });
70 |
71 | // // UPDATE: POST Edit Single Algorithm (change to put?)
72 | // app.post('/algorithm/edit/:id', (req, res) => {
73 | // // deconstruct values from req.body
74 | // const { title, author, body, difficulty, tests, tags } = req.body
75 | // // init empty object to store updated data
76 | // let algorithm = {};
77 | // algorithm.title = title;
78 | // algorithm.author = author;
79 | // algorithm.body = body;
80 | // algorithm.difficulty = difficulty;
81 | // algorithm.tests = tests;
82 | // algorithm.tags = tags;
83 |
84 | // // store algo _id in query variable
85 | // let query = { _id: req.params.id }
86 | // // call update on Algorithm collection, passing in unique selector, updated object,
87 | // // callback to be invoked after update is complete
88 | // Algorithm.updateOne(query, algorithm, (err) => {
89 | // if (err) {
90 | // console.log(err);
91 | // } else {
92 | // res.redirect('/');
93 | // }
94 | // });
95 | // });
96 |
97 |
98 | // // DELETE:
99 | // app.delete('/algorithms/edit/:id', (req, res) => {
100 | // // store algo _id in query variable
101 | // let query = { _id: req.params.id };
102 |
103 | // Algorithm.deleteOne(query, (err) => {
104 | // if (err) {
105 | // console.log(err);
106 | // }
107 | // res.send(200).send('Success');
108 | // })
109 | // })
110 |
111 |
112 | // // // Add Route for Solutions
113 | // // app.get('/algorithms/add', (req, res) => {
114 | // // res.render('algorithms', {
115 | // // title: 'Add Algorithm'
116 | // // });
117 | // // });
118 |
119 |
120 | // catch-all route handler for any requests to an unknown route
121 | // app.use('*', (req, res) => {
122 | // console.log('Unknown route!')
123 | // res.sendStatus(404)
124 | // });
125 |
126 |
127 | app.get('/*', function (req, res) {
128 | res.sendFile(path.join(__dirname, '../index.html'), function (err) { //for no 404 error w/ react router
129 | if (err) {
130 | res.status(500).send(err)
131 | }
132 | })
133 | })
134 |
135 |
136 | // Start Server
137 | app.listen(PORT, () => console.log(`Server listening on ${PORT}...`));
138 |
139 |
140 |
141 | // // update algo
142 | // // delete algo
143 |
144 | module.exports = app;
--------------------------------------------------------------------------------
/client/components/PostAlgo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 |
4 | // import ability to handle routers in React
5 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
6 | import { Link } from 'react-router-dom'
7 |
8 | class PostAlgo extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | title: '',
13 | author: '',
14 | difficulty: '',
15 | prompt: '',
16 | url: '',
17 | // tags: [],
18 | };
19 |
20 | this.handleChange = this.handleChange.bind(this);
21 | this.onSubmit = this.onSubmit.bind(this);
22 | }
23 |
24 | handleChange(event) {
25 | this.setState({ [event.target.name]: event.target.value });
26 | }
27 |
28 | onSubmit(event) {
29 | event.preventDefault();
30 |
31 | // deconstruct form data out of state
32 | const { title, author, difficulty, prompt, url } = this.state;
33 |
34 | fetch('/add/', {
35 | method: 'POST',
36 | headers: {
37 | 'Content-Type': 'application/json',
38 | Accept: 'application/json',
39 | },
40 | // stringify this.state (populated by input form) and place in request.body to send to server
41 | body: JSON.stringify(this.state)
42 | })
43 | .then((res) => res.json())
44 | .then((data) => {
45 | if (!Array.isArray(data)) {
46 | data = [];
47 | }
48 | this.props.history.push("/");
49 | })
50 | .catch((err) => {
51 | console.log('error: ', err)
52 | this.props.history.push("/");
53 | })
54 | }
55 |
56 |
57 | render() {
58 |
59 | // const backStyle = {
60 | // padding: '20%',
61 | // width: '150px',
62 | // height: '40px',
63 | // // display: 'flex',
64 | // // alignItems: 'center',
65 | // // textDecoration: 'underline',
66 | // }
67 |
68 | return (
69 | 73 |
70 |
116 |
117 |
118 |
119 | );
120 | }
121 | }
122 |
123 |
124 | export default PostAlgo;
125 |
126 | // styling for back buton
127 | // style={{ color: 'inherit', textDecoration: 'inherit' }}
128 |
129 |
130 |
131 | //
163 | //
--------------------------------------------------------------------------------
/client/stylesheets/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | color: #e8e9ec;
3 | font-family: Arial, Helvetica, sans-serif;
4 | }
5 |
6 | /* * button :hover {
7 | background-color: red;
8 | } */
9 |
10 | body {
11 | margin: 0;
12 | text-align: center;
13 | background-color: #1d1d1d;
14 | }
15 |
16 | main {
17 | margin: 40px 0px;
18 | }
19 |
20 |
21 | .header {
22 | /* border: black 1px solid; */
23 |
24 | display: flex;
25 | justify-content: space-between;
26 | align-items: center;
27 |
28 | padding: 0 10%;
29 |
30 | margin-bottom: 1.5%;
31 | }
32 |
33 | h1 {
34 | display: inline;
35 | font-size: 50px;
36 | }
37 |
38 | .header-button {
39 | height: 100px;
40 | width: 100px;
41 | border-radius: 100%;
42 | border: solid white 3px;
43 | background-color: #1d1d1d;
44 | font-size: 100px;
45 | font-weight: 400;
46 | /* color: white; */
47 | display: flex;
48 | justify-content: center;
49 | align-items: center;
50 | }
51 |
52 | .difficulty {
53 | /* border: solid black 1px; */
54 |
55 | margin-bottom: 10%;
56 | }
57 |
58 | .difficulty button {
59 | background-color: #1d1d1d;
60 | margin: 0 18px;
61 | padding: 2.8%;
62 | font-size: 25px;
63 | border: 4px solid white;
64 | border-radius: 50px;
65 | font-weight: 800;
66 | }
67 |
68 | .difficulty :nth-child(1) {
69 | color: #00FF00;
70 | }
71 |
72 | .difficulty :nth-child(2) {
73 | color: #00FFFF;
74 | }
75 |
76 | .difficulty :nth-child(3) {
77 | color: #FF0099;
78 | }
79 |
80 | .main-Container{
81 | /* border: solid black 1px; */
82 | }
83 |
84 | .prompts {
85 | /* border: solid black 1px; */
86 |
87 | text-align: center;
88 | display: flex;
89 | flex-wrap: wrap;
90 | justify-content: center;
91 |
92 | margin: 3%
93 | }
94 |
95 |
96 | .box {
97 | border: solid white 4px;
98 | background-color: #1d1d1d;
99 | width: 100px;
100 | height: 100px;
101 | font-size: 30px;
102 | border-radius: 10px;
103 | margin: 5px;
104 | flex-basis: 30%;
105 | display: flex;
106 | justify-content: center;
107 | align-items: center;
108 | }
109 |
110 | .box button {
111 | background-color: #1d1d1d;
112 | }
113 |
114 |
115 |
116 | .post-algo {
117 | /* border: solid pink 1px; */
118 | height: 900px;
119 | margin: 80px 100px;
120 |
121 | }
122 |
123 | .post-algo h1 {
124 | font-size: 50px;
125 | }
126 |
127 | .post-algo button {
128 | border: 4px solid white;
129 |
130 | color: white;
131 | width: 100px;
132 |
133 | background-color: #1d1d1d;
134 | margin: 0 18px;
135 | padding: 2.8%;
136 | font-size: 60x;
137 | border-radius: 10px;
138 | font-weight: 800;
139 | }
140 |
141 | form {
142 | /* border: solid blue 1px; */
143 |
144 | margin-top: 60px;
145 |
146 | font-size: 25px;
147 | padding: 60px;
148 |
149 |
150 | display: flex;
151 | flex-direction: column;
152 | align-items: space-around;
153 | }
154 |
155 | form input {
156 | /* color: white; */
157 | width: 400px;
158 |
159 | background-color: #1d1d1d;
160 | margin: 0 18px;
161 | padding: 2.8%;
162 | font-size: 10x;
163 | border: 4px solid white;
164 |
165 | font-weight: 800;
166 |
167 | text-decoration: none;
168 | }
169 |
170 | form label {
171 | margin: 10px 0px;
172 | display: flex;
173 | justify-content: space-between;
174 | align-items: center;
175 | }
176 |
177 | .buttons {
178 | /* border: solid 1px purple; */
179 | display: flex;
180 | justify-content: space-between;
181 | border-radius: 10px;
182 | color: white;
183 | /* width: 400px; */
184 |
185 | background-color: #1d1d1d;
186 | margin: 0 18px;
187 | padding: 0 10%;
188 | font-size: 10x;
189 |
190 | font-weight: 800;
191 |
192 | text-decoration: none;
193 | }
194 |
195 |
196 |
197 | .submit-button {
198 | border-radius: 10px;
199 | color: white;
200 |
201 | background-color: #1d1d1d;
202 | margin: 0 23px;
203 | padding: 12%;
204 | font-size: 30px;
205 | border: 4px solid white;
206 |
207 | font-weight: 900;
208 |
209 | text-decoration: none;
210 |
211 | width: 180px;
212 |
213 | /* align-self: flex-end;
214 | display: inline; */
215 | }
216 |
217 | .buttons button {
218 | /* border: 1px solid pink; */
219 | border: none;
220 | font-size: 30px;
221 |
222 | }
223 |
224 | .back {
225 | border: solid white 4px;
226 | text-decoration: none;
227 |
228 | display: flex;
229 | align-items: center;
230 | border-radius: 10px;
231 |
232 | padding: 2%;
233 | }
234 |
235 |
236 |
237 |
238 |
239 | .single-algo {
240 | /* border: solid pink 1px; */
241 |
242 | display: flex;
243 | flex-direction: column;
244 | justify-content: center;
245 | align-items: center;
246 |
247 | }
248 |
249 |
250 | .single-algo h4 {
251 | font-size: 36px;
252 | margin-top: 30px;
253 | padding: 0;
254 | }
255 |
256 | .single-algo .info {
257 | border: solid 1px pink;
258 |
259 | display: flex;
260 | flex-direction: column;
261 | justify-content: space-between;
262 |
263 | font-size: 20px;
264 |
265 | width: 60%;
266 | }
267 |
268 | .player {
269 | display: flex;
270 | justify-content: center;
271 | }
272 |
273 | .single-algo button {
274 | background-color: inherit;
275 | color: inherit;
276 | border: solid white 1px;
277 | padding: 1%;
278 | font-size: 25px;
279 | border-radius: 10px;
280 | margin: 0 30px;
281 |
282 |
283 | width: 150px;
284 | font-weight: 600;
285 | }
286 |
287 | button:hover {
288 | cursor: pointer;
289 | }
290 |
291 | /* .single-back {
292 | background-color: inherit;
293 | color: inherit;
294 | border: solid white 1px;
295 | padding: 10px;
296 | font-size: 25px;
297 | border-radius: 10px;
298 |
299 | margin: 20px;
300 | text-decoration: none;
301 | color: white;
302 | }
303 |
304 | .delete {
305 | background-color: inherit;
306 | color: white;
307 | border: solid white 1px;
308 | padding: 10px;
309 | font-size: 25px;
310 |
311 | } */
312 |
313 |
314 | .footer {
315 | /* border: solid blue 1px; */
316 | position: fixed;
317 | left: 0;
318 | bottom: 90px;
319 | width: 100%;
320 | color: white;
321 | text-align: center;
322 | font-size: 20px;
323 | }
--------------------------------------------------------------------------------
71 |
73 |
74 | < div className="form-details">
75 |
102 |
103 | Add Algo
72 |
104 |
105 |
106 |
107 |
108 | this.onSubmit(event)}
112 | >
113 |
114 |
115 |