Demo: http://ideaboard-react.surge.sh/
API: https://idea-api.herokuapp.com/api/v1/ideas
Back End repo: https://github.com/cndragn/ideaboard-api
A place to create a collection of your ideas in one place.
Click the "New Idea" button to create a new card, then enter a title and description of your idea. To edit an idea, click directly on the title or description of the idea you would like to modify and type in the new information. To delete an idea, hover over or click on a card and click on the red "X"
Ruby on Rails, React, API, Bootstrap, Sass.
Back end API deployed to Heroku, React front end deployed to Surge.sh
- Ability to include and edit photos.
- User login to create and save personal idea boards.
- Create collections of idea boards.
- Share idea board link with others.
- Ability to make boards public or private.
- Browse through public idea boards.
- Save an idea from a public idea board to personal idea board.
- Clone ideaboard-react repo and cd into it
- terminal:
yarn
- terminal:
yarn start
- Update api links in
IdeaForm.js
andIdeasContainer.js
fromidea-api.herokuapp.com/api/vi/ideas
tolocalhost:3001
- terminal:
- Clone ideaboard-api repo and cd into it
- terminal:
rails db:migrate db:seed
- terminal:
rails s -p 3001
- terminal:
- terminal:
gem install sass
- In
package.json
's scripts, add this line:"sass" : "sass --watch src/styles/scss:src/styles/css"
- Create your custom bootstrap theme file
src/styles/scss/custom.scss
- Open a new tab in terminal:
yarn run sass
- In src/index.js replace
import 'bootstrap/dist/css/bootstrap.css';
withimport './styles/css/custom.css';
- At bottom of custom.scss file add
@import "../../../node_modules/bootstrap/scss/bootstrap";
- Update api in IdeaForm.js and IdeasContainer.js from localhost:3001
- terminal:
npm run build
- terminal:
surge
- Log in or create account at prompt
- Add
build
at end of project path - Change project url if desired, ending with surge.sh
- terminal:
npm run build
- Change index.html to 200.html in build folder to correctly run React routes
- terminal:
surge
- Log in at prompt
- Add
build
at end of project path - Change project url to project being updated
Tutorial: Learnetto: React JS tutorial make an idea board app